用vue+elementui写一个商品详情页

好的，下面是用 Vue 和 Element UI 写一个简单的商品详情页的示例代码：

<template>
  <div class="product-detail">
    <h1>{{ product.name }}</h1>
    <img :src="product.image" alt="">
    <p>{{ product.description }}</p>
    <el-divider></el-divider>
    <p>价格：{{ product.price }}</p>
    <el-button type="primary" size="medium" @click="addToCart()">加入购物车</el-button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState('store', ['cart']),
    product() {
      // 假设这里通过接口获取了商品信息
      return {
        id: 1,
        name: '商品名称',
        image: 'https://example.com/image.png',
        description: '商品描述',
        price: 100.00,
      };
    },
  },
  methods: {
    ...mapMutations('store', ['addToCart']),
  },
};
</script>

上面的代码中，我们使用了 Element UI 的组件和 Vue 的 computed 属性和 methods 属性来实现了一个简单的商品详情页。其中，商品信息是通过 computed 属性获取到的，加入购物车是通过 methods 属性中的 addToCart 方法实现的。需要注意的是，我们在 methods 属性中使用了 Vuex 中的 mapMutations 辅助函数来简化代码。

希望这个示例能够对你有所帮助！