BUIU Manor: 基于 Vue.js 的移动端商城卡片设计与实现

应用场景介绍

本代码适用于移动端商城场景，可用于展示商品信息、店铺信息以及相关功能，如商品详情页、店铺详情页、购物车等。通过精美的卡片设计，为用户提供直观且交互友好的购物体验。

代码基本功能介绍

本代码的主要功能包括：

• 展示商品列表，包含商品图片、名称、价格等信息
• 展示店铺列表，包含店铺名称、评分、头像等信息
• 提供商品详情页，展示商品详细信息
• 提供店铺详情页，展示店铺信息及商品列表
• 提供购物车功能，用户可将商品添加到购物车并查看购物车内容

功能实现步骤及关键代码分析说明

1. 导入依赖库

import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createPinia } from 'pinia'
import { ref, onMounted } from 'vue'

首先，导入 Vue.js、Vue Router、Pinia 和 Vue 核心库。

2. 创建 Vue 实例

const app = createApp({
  setup() {
    // ...
  },
  render() {
    return h(App)
  }
})

创建 Vue 实例并定义其 setup 和 render 函数。

3. 创建路由

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: Home
    },
    {
      path: '/product/:id',
      component: ProductDetail
    },
    {
      path: '/shop/:id',
      component: ShopDetail
    },
    {
      path: '/cart',
      component: Cart
    }
  ]
})

创建 Vue Router 实例并定义路由规则。

4. 创建状态管理库

const pinia = createPinia()

创建 Pinia 状态管理库。

5. 获取数据

const products = ref([])
const shops = ref([])
onMounted(() => {
  // 获取数据并填充到响应式变量中
})

使用 Vue 的 ref 和 onMounted 钩子来获取数据并填充到响应式变量中。

6. 渲染卡片

<template>
  <div class="card">
    <div class="card-header">
      <img :src="product.image" alt="">
      <div class="card-title">{{ product.name }}</div>
    </div>
    <div class="card-body">
      {{ product.description }}
    </div>
    <div class="card-footer">
      <button @click="addToCart">加入购物车</button>
    </div>
  </div>
</template>

export default {
  props: ['product'],
  methods: {
    addToCart() {
      // 添加商品到购物车
    }
  }
}

定义一个 Vue 组件来渲染卡片，并通过 props 传入数据。

7. 实现购物车功能

const cart = ref([])
const addToCart = (product) => {
  // 将商品添加到购物车
}

使用 Vue 的 ref 来管理购物车状态，并定义一个 addToCart 方法来将商品添加到购物车。

总结与展望

开发过程中的经验与收获

• 熟练掌握 Vue.js、Vue Router、Pinia 等框架的使用
• 理解了移动端商城卡片设计的要点
• 提升了代码可维护性和可扩展性

未来该卡片功能的拓展与优化

• 增加卡片的自定义功能，允许用户调整卡片样式
• 集成更多电商功能，如订单管理、支付等
• 优化卡片的性能，提升加载速度和用户体验