使用idea中的vue做一个html的简单的产品信息列表，包含序号，名称，型号，规格，删除操作

1. 首先，在idea中新建一个Vue项目。

2. 在src目录下新建一个名为product.html的文件，代码如下：

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>型号</th>
          <th>规格</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in productList" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.name }}</td>
          <td>{{ item.model }}</td>
          <td>{{ item.specification }}</td>
          <td><button @click="deleteProduct(item.id)">删除</button></td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      productList: [
        { id: 1, name: '产品1', model: 'M1', specification: '100*100' },
        { id: 2, name: '产品2', model: 'M2', specification: '200*200' },
        { id: 3, name: '产品3', model: 'M3', specification: '300*300' }
      ]
    };
  },
  methods: {
    deleteProduct(id) {
      const index = this.productList.findIndex(item => item.id === id);
      if (index !== -1) {
        this.productList.splice(index, 1);
      }
    }
  }
};
</script>

3. 在App.vue中引入product.html文件，代码如下：

<template>
  <div>
    <h1>产品列表</h1>
    <product></product>
  </div>
</template>

<script>
import Product from './product.html';

export default {
  components: {
    Product
  }
};
</script>

4. 运行项目，即可看到一个简单的产品信息列表，包括序号、名称、型号、规格和删除操作。点击删除按钮，可以删除对应的产品信息。