Vue 购物车 目标: 完成商品浏览和删除功能, 当无数据给用户提示 需求1: 根据给的初始数据, 把购物车页面铺设出来 需求2: 点击对应删除按钮, 删除对应数据 需求3: 当数据没有了, 显示一条提示消息

Vue.js 购物车项目可以按照以下步骤来构建：

1. **初始化界面**:
- 使用Vue的组件化思想，创建一个`ShoppingCart.vue`组件，负责展示购物车的商品列表。
- 在模板部分（HTML部分），遍历给定的初始数据（例如通过props接收的数据数组）渲染每个商品，包括商品名称、图片和一个删除按钮。

<template>
  <div v-if="items.length">
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <img :src="item.image" alt="商品图片"/>
        <p>{{ item.name }}</p>
        <button @click="deleteItem(index)">删除</button>
      </li>
    </ul>
  </div>
  <div v-else>购物车为空，请添加商品。</div>
</template>

2. **处理逻辑**:
- 在组件的`data`里声明一个`items`数组，并在`created`生命周期钩子中设置初始数据。
- `methods`里定义`deleteItem`函数，接受商品的索引作为参数，从数组中移除对应元素并更新视图。

<script>
export default {
  props: ['initialData'],
  data() {
    return { items: this.initialData };
  },
  methods: {
    deleteItem(index) {
      this.items.splice(index, 1);
    }
  }
}
</script>

3. **组件应用**:
- 在需要使用购物车功能的父组件中，实例化`ShoppingCart`组件并传递初始商品数据。

<template>
  <div>
    <!-- 其他内容 -->
    <ShoppingCart :initial-data="cartItems" />
  </div>
</template>

<script>
import ShoppingCart from './components/ShoppingCart.vue';

export default {
  components: {
    ShoppingCart
  },
  data() {
    return {
      cartItems: [
        // 初始商品数据
      ]
    };
  }
};
</script>

现在，当你有商品数据时，会显示购物车列表，点击删除按钮可以清除对应的商品。当购物车数据清空时，会自动显示“购物车为空”的提示信息。