利用自定义插件和组件实现一个商品列表页（要求包含关键信息：商品图、商品名、价格）

首先，需要安装 Vue.js 脚手架，然后创建一个新的 Vue 项目。

1. 创建商品列表组件

在 src/components 目录下创建一个名为 ProductList.vue 的组件，代码如下：

<template>
  <div class="product-list">
    <div v-for="(product, index) in products" :key="index" class="product-item">
      <img :src="product.image" :alt="product.name" class="product-image">
      <h3 class="product-name">{{ product.name }}</h3>
      <p class="product-price">{{ product.price }}</p>
    </div>
  </div>
</template>

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

<style scoped>
.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.product-item {
  flex-basis: 30%;
  margin-bottom: 20px;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
  text-align: center;
}
.product-image {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}
.product-name {
  margin-top: 10px;
  margin-bottom: 5px;
}
.product-price {
  font-weight: bold;
}
</style>

2. 创建商品列表插件

在 src/plugins 目录下创建一个名为 productList.js 的插件，代码如下：

import ProductList from '@/components/ProductList.vue';

export default {
  install(Vue) {
    Vue.component('product-list', ProductList);
  },
};

3. 在 main.js 中注册插件

在 main.js 中导入 productList.js 插件，并通过 Vue.use() 方法注册插件，代码如下：

import Vue from 'vue';
import App from './App.vue';
import ProductListPlugin from './plugins/productList';

Vue.config.productionTip = false;

Vue.use(ProductListPlugin);

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

4. 在商品列表页中使用插件

在 src/views 目录下创建一个名为 ProductListPage.vue 的视图组件，代码如下：

<template>
  <div class="product-list-page">
    <h1>商品列表</h1>
    <<product-list :products="products" />
  </div>
</template>

<script>
export default {
  name: 'ProductListPage',
  data() {
    return {
      products: [
        {
          name: '商品1',
          image: 'https://via.placeholder.com/300x200',
          price: 100,
        },
        {
          name: '商品2',
          image: 'https://via.placeholder.com/300x200',
          price: 200,
        },
        {
          name: '商品3',
          image: 'https://via.placeholder.com/300x200',
          price: 300,
        },
      ],
    };
  },
};
</script>

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

在 App.vue 中引入 ProductListPage.vue 组件，代码如下：

<template>
  <div id="app">
    <ProductListPage />
  </div>
</template>

<script>
import ProductListPage from '@/views/ProductListPage.vue';

export default {
  name: 'App',
  components: {
    ProductListPage,
  },
};
</script>

5. 运行项目

运行项目，即可看到商品列表页。