【2022版】Vue3 系统入门与项目实战| 最新高清完整

【2022版】Vue3 系统入门与项目实战| 最新高清完整---夏の哉-----97it.-------top/410/

Vue3项目实战：电商购物车功能完整实现 引言 在电商网站中，购物车是用户购物流程中必不可少的一部分。用户可以在购物车中添加商品，修改商品数量，删除商品，甚至在结算时查看订单总结。今天，我们将使用 Vue3 来实现一个简单的电商购物车功能，涵盖商品的添加、修改数量、删除和结算等操作。 通过这个项目实践，我们将掌握 Vue3 的基础知识，同时深入理解如何在实际项目中构建交互式功能。 项目准备 在开始之前，我们需要做以下准备工作：

1.安装 Vue3 项目： 可以使用 Vue CLI 或 Vite 创建 Vue3 项目。这里我们使用 Vite 来创建一个新的项目：

npm create vite@latest vue-shopping-cart --template vue cd vue-shopping-cart npm install

2.安装依赖： 我们会用到一些额外的 UI 组件库（例如，Element Plus）来增强界面的美观性和用户体验。

npm install element-plus

3.项目结构：

4.src/ 5.assets/：存放静态资源（如商品图片等） 6.components/：存放 Vue 组件 7.views/：存放页面组件 8.store/：Vuex 状态管理

1. 设计购物车数据结构 我们需要一个数据结构来存储购物车中的商品信息。每个商品应该包含以下信息：

9.商品ID 10.商品名称 11.商品单价 12.商品数量 13.商品总价（根据数量计算）

首先，在 src/store 文件夹下创建一个 cart.js 文件来管理购物车状态： // src/store/cart.js import { reactive } from 'vue';

export const cart = reactive({ items: [],

// 添加商品到购物车 addItem(item) { const existingItem = this.items.find(i => i.id === item.id); if (existingItem) { existingItem.quantity += item.quantity; } else { this.items.push(item); } },

// 删除购物车中的商品 removeItem(id) { this.items = this.items.filter(item => item.id !== id); },

// 修改商品数量 updateQuantity(id, quantity) { const item = this.items.find(item => item.id === id); if (item) item.quantity = quantity; },

// 获取购物车总金额 getTotalPrice() { return this.items.reduce((total, item) => total + (item.price * item.quantity), 0); } });

2. 创建商品列表页面 在 src/views/ 目录下创建 ProductList.vue 组件，显示商品列表，并允许用户将商品添加到购物车： <!-- src/views/ProductList.vue --> <template> <div class="product-list"> <div class="product" v-for="product in products" :key="product.id"> <img :src="product.image" alt="product.name" /> <h3>{{ product.name }}</h3> <p>Price: {{ product.price }}$</p> <button @click="addToCart(product)">Add to Cart</button> </div> </div> </template>

<script setup> import { cart } from '../store/cart';

const products = [ { id: 1, name: 'Product A', price: 20, image: '/assets/product-a.jpg' }, { id: 2, name: 'Product B', price: 35, image: '/assets/product-b.jpg' }, { id: 3, name: 'Product C', price: 50, image: '/assets/product-c.jpg' }, ];

const addToCart = (product) => { cart.addItem({ ...product, quantity: 1 }); }; </script>

<style scoped> .product-list { display: flex; gap: 20px; }

.product { width: 200px; border: 1px solid #ddd; padding: 10px; text-align: center; }

button { background-color: #ff9900; color: white; padding: 5px 10px; border: none; cursor: pointer; } </style>

3. 创建购物车页面 购物车页面显示用户选择的商品，并允许用户修改商品数量、删除商品和查看总价。 <!-- src/views/Cart.vue --> <template> <div class="cart"> <h2>Your Shopping Cart</h2> <div v-if="cart.items.length === 0"> <p>Your cart is empty.</p> </div> <div v-else> <div class="cart-item" v-for="item in cart.items" :key="item.id"> <img :src="item.image" alt="item.name" /> <h3>{{ item.name }}</h3> <p>Price: {{ item.price }}&lt;/p&gt; &lt;input type="number" v-model.number="item.quantity" @change="updateItemQuantity(item)" /&gt; &lt;button @click="removeItem(item.id)"&gt;Remove&lt;/button&gt; &lt;/div&gt; &lt;div class="total"&gt; &lt;h3&gt;Total: {{ totalPrice }}</h3> <button @click="checkout">Checkout</button> </div> </div> </div> </template>

<script setup> import { cart } from '../store/cart';

const removeItem = (id) => { cart.removeItem(id); };

const updateItemQuantity = (item) => { cart.updateQuantity(item.id, item.quantity); };

const totalPrice = computed(() => cart.getTotalPrice());

const checkout = () => { alert('Proceeding to checkout...'); }; </script>

<style scoped> .cart { padding: 20px; }

.cart-item { display: flex; align-items: center; gap: 10px; }

.cart-item img { width: 50px; }

.total { margin-top: 20px; font-size: 18px; } </style>

4. 配置路由 在 src/router/index.js 中配置路由，以便用户在不同页面之间切换： // src/router/index.js import { createRouter, createWebHistory } from 'vue-router'; import ProductList from '../views/ProductList.vue'; import Cart from '../views/Cart.vue';

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

const router = createRouter({ history: createWebHistory(import.meta.env.BASE_URL), routes, });

export default router;

5. 整合和测试 确保所有组件和路由设置完毕后，在 src/App.vue 中渲染主页面并导入 Vue Router： <!-- src/App.vue --> <template> <router-view /> </template>

<script setup> import { createRouter, createWebHistory } from 'vue-router'; import { createApp } from 'vue'; import ProductList from './views/ProductList.vue'; import Cart from './views/Cart.vue'; import './assets/main.css';

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

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

const app = createApp(App); app.use(router); app.mount('#app'); </script>

6. 结语 通过以上步骤，我们已经实现了一个基本的电商购物车功能。用户可以浏览商品、将商品添加到购物车、修改数量、删除商品，并查看购物车总价。这个项目展示了如何使用 Vue3 构建一个功能完整的购物车应用，并展示了 Vue3 响应式状态管理的强大功能。 如果想要进一步优化该项目，可以添加更多的功能，如用户登录、商品分类、支付接口等。希望这篇文章能够帮助你更好地理解 Vue3 的开发和应用，能够在电商网站开发中得到实际运用。