VUE3入门实例：构建一个简单的在线购物商城

VUE3 入门实例：构建一个简单的在线购物商城

随着互联网的不断发展和普及，网购已经成为了人们更为便捷的购物方式之一。而在线购物商城就是这一趋势中不可或缺的一部分。本文将介绍如何使用 Vue3 构建一个简单的在线购物商城，并使用一些常用的技术和工具来实现该应用程序。

第一步：创建一个新的 Vue3 项目并配置环境

首先，我们需要创建一个新的 Vue3 项目。可以通过在命令行中执行以下命令来实现：

vue create shopping-mall

在创建项目时，需要选择使用 Vue3 版本，以便能够使用 Vue3 的新特性和功能。

同时，我们还需要配置一些环境。例如使用 Axios 库进行 HTTP 请求、使用 Vue Router 实现页面的导航、以及使用 Vuex 管理应用程序的状态等。

我们可以使用以下命令来安装这些依赖项：

npm install axios vue-router vuex

第二步：设计并实现数据模型

接下来，我们需要设计并实现该应用程序的数据模型。为了简化设计，我们可以使用以下假设数据：

const products = [
  {id: 1, name: '手机', price: 1999},
  {id: 2, name: '电脑', price: 5999},
  {id: 3, name: '平板', price: 2999},
  {id: 4, name: '手表', price: 999},
  {id: 5, name: '耳机', price: 199}
]

可以看到，数据模型由一个包含多个商品对象的数组组成。

第三步：实现商品列表页面

在该应用程序中，我们需要实现一个商品列表页面，用于展示所有商品的信息。

在该页面中，我们需要首先获取数据模型中的商品列表，并将其展示在页面上。我们可以使用 Axios 库进行 HTTP 请求，并在响应成功后将数据填充到页面上。

<template>
  <div class="product-list">
    <div v-for="product in products" :key="product.id">
      <h3>{{product.name}}</h3>
      <p>{{product.price}}</p>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'ProductList',
  data() {
    return {
      products: []
    }
  },
  created() {
    axios.get('/api/products').then(response => {
      this.products = response.data
    })
  }
}
</script>

在该代码中，我们使用了一个 HTTP GET 请求从服务器获取所有商品的列表，并将其绑定到页面的 products 变量上。

第四步：实现商品详情页面

接下来，我们需要实现商品详情页面，用于展示某个商品的详细信息。

在该页面中，我们需要从前一个页面获取到某个特定的商品对象，并展示其详细信息。同时，我们还需要提供一个购买按钮，以便用户可以将该商品添加到购物车中。

<template>
  <div class="product-details">
    <h2>{{product.name}}</h2>
    <p>{{product.price}}</p>
    <button @click="addToCart">购买</button>
  </div>
</template>

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

在该代码中，我们使用了一个 props 属性来接收来自前一个页面的商品对象，并将其绑定到页面上。同时，在页面上提供了一个购买按钮，用于将该商品添加到购物车中。

第五步：实现购物车页面

在该应用程序中，我们还需要实现购物车页面，用于展示所有已选商品的信息和总价。

在该页面中，我们需要首先获取所有已选商品的列表，并将其展示在页面上。我们可以使用 Vuex 状态管理库来管理购物车状态，并在响应成功后将数据填充到页面上。

<template>
  <div class="shopping-cart">
    <div v-for="product in products" :key="product.id">
      <h3>{{product.name}}</h3>
      <p>{{product.price}}</p>
    </div>
    <p>总价：{{total}}</p>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'ShoppingCart',
  computed: {
    ...mapState({
      products: state => state.cart.products,
      total: state => state.cart.total
    })
  }
}
</script>

在该代码中，我们使用了 mapState 函数来将购物车的状态映射为页面上的属性，从而方便展示所有已选商品的信息和总价。

第六步：实现路由导航

最后，我们需要实现路由导航，以便用户可以在各个页面之间进行导航操作。

首先，我们需要使用 Vue Router 来实现页面之间的导航。在该代码中，我们需要定义三个路由：

• 商品列表页面
• 商品详情页面
• 购物车页面

import { createRouter, createWebHistory } from 'vue-router'
import ProductList from './components/ProductList.vue'
import ProductDetails from './components/ProductDetails.vue'
import ShoppingCart from './components/ShoppingCart.vue'

const routes = [
  { path: '/', component: ProductList },
  { path: '/product/:id', component: ProductDetails, props: true },
  { path: '/cart', component: ShoppingCart }
]

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

export default router

在该代码中，我们使用了 props: true 属性来允许在路由之间传递参数，并实现了从商品列表页面到商品详情页面和从商品详情页面到购物车页面之间的导航操作。

同时，我们还需要在应用程序的主组件中使用 <router-view> 标签来渲染页面：

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

最后，我们需要在应用程序的入口文件中将路由实例绑定到应用程序上：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

createApp(App)
  .use(router)
  .use(store)
  .mount('#app')

现在，我们已经成功地使用 Vue3 构建了一个简单的在线购物商城应用程序。在该应用程序中，我们实现了商品列表页面、商品详情页面和购物车页面，并使用 Axios 库进行 HTTP 请求、使用 Vue Router 实现页面导航、以及使用 Vuex 管理应用程序的状态等。