“购物车”是在线商城中的基本功能之一，可以实现将顾客想要购买的商品添加到购物车，计算购物车中商品的总价格。动手搭建购物车案例，分别实现如图所示的商品列表页面和购物车页面。图片请参考网络资源，其余信息保持不变。

好的，让我为您介绍如何搭建购物车功能。在Vue.js中，可以使用单文件组件(.vue文件)来创建购物车页面和商品列表页面。下面是一个简单的购物车功能示例：

首先，在商品列表页面中，您需要引入商品数据，然后使用v-for指令将其循环渲染为列表：

<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="item in items" :key="item.id">
        <img :src="item.img" alt="商品图片">
        <h3>{{ item.name }}</h3>
        <p>{{ item.desc }}</p>
        <p>价格：{{ item.price }}</p>
        <button @click="addToCart(item)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: '商品1', desc: '这是商品1的描述', price: 100, img: 'https://xxx.com/1.jpg' },
        { id: 2, name: '商品2', desc: '这是商品2的描述', price: 200, img: 'https://xxx.com/2.jpg' },
        { id: 3, name: '商品3', desc: '这是商品3的描述', price: 300, img: 'https://xxx.com/3.jpg' },
        { id: 4, name: '商品4', desc: '这是商品4的描述', price: 400, img: 'https://xxx.com/4.jpg' },
      ],
    };
  },
  methods: {
    addToCart(item) {
      // 添加商品到购物车
    },
  },
};
</script>

接下来，您需要创建购物车页面，其中包括购物车列表和总价。在购物车列表中，您需要循环渲染购物车中的商品，并提供删除按钮。在总价区域，您需要计算购物车中商品的总价格。下面是一个购物车页面的示例：

<template>
  <div>
    <h2>购物车</h2>
    <ul>
      <li v-for="item in cartItems" :key="item.id">
        <img :src="item.img" alt="商品图片">
        <h3>{{ item.name }}</h3>
        <p>价格：{{ item.price }}</p>
        <button @click="removeFromCart(item)">删除</button>
      </li>
    </ul>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  computed: {
    cartItems() {
      // 获取购物车中的商品列表
    },
    totalPrice() {
      // 计算购物车中商品的总价格
    },
  },
  methods: {
    removeFromCart(item) {
      // 从购物车中删除商品
    },
  },
};
</script>

最后，您需要在Vue.js应用程序中，使用Vue Router来实现商品列表页面和购物车页面的路由导航。在路由导航中，您需要将商品列表页面和购物车页面配置为Vue组件，并使用Vue Router的路由配置文件来指定路由路径和组件名称。

希望这个示例对您有所帮助，祝您开发愉快！