Vue3 基础语法综合案例：小知识，大挑战！

前端

2023-09-01 19:41:57

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

大家好，我是前端开发工程师，也是一名资深的技术博客作者。今天，我想和大家分享一个使用 Vue3 开发书籍购物车单页面应用的综合案例。在这个案例中，我们将从头开始构建一个完整的 Vue3 项目，并学习 Vue3 的基本使用技巧。

项目概述

书籍购物车是一个常见的电子商务应用，它允许用户在网站上浏览、选择和购买书籍。在这个项目中，我们将使用 Vue3 开发一个简单的书籍购物车，包括以下功能：

在界面上以表格的形式，显示一些书籍的数据。
在底部显示书籍的总价格。
点击 + 或 - 可以增加或减少书籍的数量。
点击购买按钮，可以将书籍添加到购物车。
在购物车中，用户可以查看所选书籍的详细信息，并可以修改数量或删除书籍。
用户可以点击结算按钮，完成购买。

技术选型

我们将使用以下技术来开发这个项目：

Vue3：这是一个流行的前端 JavaScript 框架，用于构建单页面应用。
Vue Router：Vue3 的官方路由库，用于管理单页面应用的路由。
Vuex：Vue3 的官方状态管理库，用于管理应用程序的状态。
Axios：一个用于发送 HTTP 请求的 JavaScript 库。

项目搭建

首先，我们需要创建一个新的 Vue3 项目。我们可以使用 Vue CLI 来快速创建一个项目。Vue CLI 是一个命令行工具，可以帮助我们快速搭建 Vue3 项目。

vue create vue3-book-shop

安装完成后，我们可以进入项目目录，并启动开发服务器。

cd vue3-book-shop
npm run serve

组件开发

接下来，我们需要开发组件。组件是 Vue3 中的基本构建块，我们可以使用它们来构建复杂的应用程序。

首先，我们需要创建一个名为 BookList.vue 的组件。这个组件将用于显示书籍列表。

<template>
  <table>
    <thead>
      <tr>
        <th>书名</th>
        <th>价格</th>
        <th>数量</th>
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="book in books" :key="book.id">
        <td>{{ book.name }}</td>
        <td>{{ book.price }}</td>
        <td>
          <button @click="decrement(book)">-</button>
          {{ book.quantity }}
          <button @click="increment(book)">+</button>
        </td>
        <td>
          <button @click="remove(book)">删除</button>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const books = ref([
      { id: 1, name: 'Vue3 实战', price: 100, quantity: 1 },
      { id: 2, name: 'React 入门', price: 80, quantity: 1 },
      { id: 3, name: 'JavaScript 高级编程', price: 120, quantity: 1 }
    ])

    const increment = (book) => {
      book.quantity++
    }

    const decrement = (book) => {
      if (book.quantity > 0) {
        book.quantity--
      }
    }

    const remove = (book) => {
      const index = books.value.indexOf(book)
      books.value.splice(index, 1)
    }

    return {
      books,
      increment,
      decrement,
      remove
    }
  }
}
</script>

然后，我们需要创建一个名为 Cart.vue 的组件。这个组件将用于显示购物车中的书籍。

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>书名</th>
          <th>价格</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="book in cart" :key="book.id">
          <td>{{ book.name }}</td>
          <td>{{ book.price }}</td>
          <td>
            <button @click="decrement(book)">-</button>
            {{ book.quantity }}
            <button @click="increment(book)">+</button>
          </td>
          <td>
            <button @click="remove(book)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
    <div>
      总价：{{ totalPrice }}
    </div>
    <button @click="checkout">结算</button>
  </div>
</template>

<script>
import { ref, computed } from 'vue'

export default {
  setup() {
    const cart = ref([])

    const totalPrice = computed(() => {
      let total = 0
      for (let i = 0; i < cart.value.length; i++) {
        total += cart.value[i].price * cart.value[i].quantity
      }
      return total
    })

    const increment = (book) => {
      const index = cart.value.indexOf(book)
      cart.value[index].quantity++
    }

    const decrement = (book) => {
      const index = cart.value.indexOf(book)
      if (cart.value[index].quantity > 0) {
        cart.value[index].quantity--
      }
    }

    const remove = (book) => {
      const index = cart.value.indexOf(book)
      cart.value.splice(index, 1)
    }

    const checkout = () => {
      // 这里省略了结算的逻辑
    }

    return {
      cart,
      totalPrice,
      increment,
      decrement,
      remove,
      checkout
    }
  }
}
</script>

路由配置

接下来，我们需要配置路由。路由可以帮助我们管理单页面应用中的页面切换。

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: BookList
  },
  {
    path: '/cart',
    component: Cart
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

状态管理

最后，我们需要配置状态管理。状态管理可以帮助我们管理应用程序的状态。

import { createStore } from 'vuex'

const store = createStore({
  state: {
    books: [
      { id: 1, name: 'Vue3 实战', price: 100, quantity: 1 },
      { id: 2, name: 'React 入门', price: 80, quantity: 1 },
      { id: 3, name: 'JavaScript 高级编程', price: 120, quantity: 1 }
    ],
    cart: []
  },
  mutations: {
    addToCart(state, book) {
      const index = state.cart.findIndex(item => item.id === book.id)
      if (index === -1) {
        state.cart.push(book)
      } else {
        state.cart[index].quantity++
      }
    },
    removeFromCart(state, book) {
      const index = state.cart.findIndex(item => item.id === book.id)
      state.cart.splice(index, 1)
    },
    updateQuantity(state, { book, quantity }) {
      const index = state.cart.findIndex(item => item.id === book.id)
      state.cart[index].quantity = quantity
    }
  }
})

export default store