创建vue项目实现商品增加删除功能,点击“增加商品”，把商品详情增加到下列表格点击“删除”，可以删除该条信息

首先，需要安装Vue CLI来创建Vue项目。可以在命令行中输入以下命令：

npm install -g @vue/cli

然后，创建一个新的Vue项目：

vue create my-project

接下来，我们需要创建一个组件来显示商品列表和处理添加/删除商品的逻辑。在`src/components`目录下创建一个名为`ProductList.vue`的文件，并添加以下代码：

<template>
  <div>
    <h2>商品列表</h2>
    <table>
      <thead>
        <tr>
          <th>名称</th>
          <th>价格</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(product, index) in products" :key="index">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
          <td>
            <button @click="removeProduct(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      <h2>添加商品</h2>
      <form @submit.prevent="addProduct">
        <label>
          名称：
          <input type="text" v-model="newProduct.name" />
        </label>
        <label>
          价格：
          <input type="text" v-model="newProduct.price" />
        </label>
        <button type="submit">添加商品</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { name: "商品1", price: 10.0 },
        { name: "商品2", price: 20.0 },
        { name: "商品3", price: 30.0 },
      ],
      newProduct: {
        name: "",
        price: "",
      },
    };
  },
  methods: {
    addProduct() {
      this.products.push({
        name: this.newProduct.name,
        price: parseFloat(this.newProduct.price),
      });
      this.newProduct.name = "";
      this.newProduct.price = "";
    },
    removeProduct(index) {
      this.products.splice(index, 1);
    },
  },
};
</script>

这个组件包含一个表格来显示商品列表，以及一个表单来添加新商品。我们在组件的`data`选项中定义了一个`products`数组，其中包含一些示例商品。我们还定义了一个`newProduct`对象来存储新商品的名称和价格。

在模板中，我们使用`v-for`指令来循环遍历`products`数组，并在表格中显示每个商品的名称、价格和删除按钮。我们还使用`v-model`指令将表单输入绑定到`newProduct`对象上。

在`methods`选项中，我们定义了`addProduct`和`removeProduct`方法来处理添加和删除商品的逻辑。`addProduct`方法将新商品添加到`products`数组中，并清空`newProduct`对象。`removeProduct`方法从`products`数组中删除指定的商品。

最后，我们需要在父组件中使用`ProductList`组件。在`src/App.vue`文件中添加以下代码：

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

<script>
import ProductList from "./components/ProductList.vue";

export default {
  components: {
    ProductList,
  },
};
</script>

这将在页面上显示`ProductList`组件，其中包含一个商品列表和添加/删除商品的功能。

现在，运行`npm run serve`命令启动开发服务器，并在浏览器中打开`http://localhost:8080`查看应用程序。你应该能够看到一个空的商品列表和一个表单来添加新商品。添加一些商品并尝试删除它们，看看它们是否被正确地添加和删除。