当前位置：首页 > news >正文

开发在线商店：基于Vue2+ElementUI的电商平台前端实践

news 2025/7/9 6:34:00

Hi，我是布兰妮甜 ！在当今数字化时代，电子商务已成为商业领域的重要组成部分。开发一个功能完善、用户友好的在线商店应用对于企业拓展市场至关重要。本文将详细介绍如何使用Vue2框架配合ElementUI组件库开发一个完整的在线商店应用。

文章目录

- 一、项目初始化与配置
- - 1.1 创建Vue2项目
  - 1.2 安装ElementUI
  - 1.3 项目结构规划
- 二、核心功能模块开发
- - 2.1 用户认证模块
  - 2.2 商品展示模块
  - 2.3 购物车模块
- 三、状态管理(Vuex)
- - 3.1 购物车状态管理
- 四、路由配置
- 五、API封装与Axios配置
- 六、优化与部署
- - 6.1 性能优化
  - 6.2 部署配置
- 七、总结

一、项目初始化与配置

1.1 创建Vue2项目

首先，我们需要使用Vue CLI创建一个新的Vue2项目：

vue create online-store
cd online-store

1.2 安装ElementUI

在项目目录中安装ElementUI：

npm install element-ui -S

然后在main.js中引入ElementUI：

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)

1.3 项目结构规划

src/
├── api/            # API请求封装
├── assets/         # 静态资源
├── components/     # 公共组件
├── router/         # 路由配置
├── store/          # Vuex状态管理
├── utils/          # 工具函数
├── views/          # 页面组件
├── App.vue         # 根组件
└── main.js         # 入口文件

二、核心功能模块开发

2.1 用户认证模块

登录/注册组件

<template><div class="login-container"><el-form :model="loginForm" :rules="loginRules" ref="loginForm"><el-form-item prop="username"><el-input v-model="loginForm.username" placeholder="用户名"></el-input></el-form-item><el-form-item prop="password"><el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input></el-form-item><el-button type="primary" @click="handleLogin">登录</el-button><el-button @click="showRegisterDialog = true">注册</el-button></el-form><el-dialog title="注册" :visible.sync="showRegisterDialog"><!-- 注册表单内容 --></el-dialog></div>
</template><script>
export default {data() {return {loginForm: {username: '',password: ''},loginRules: {username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],password: [{ required: true, message: '请输入密码', trigger: 'blur' }]},showRegisterDialog: false}},methods: {handleLogin() {this.$refs.loginForm.validate(valid => {if (valid) {// 调用登录APIthis.$store.dispatch('user/login', this.loginForm).then(() => {this.$router.push('/')this.$message.success('登录成功')})}})}}
}
</script>

2.2 商品展示模块

商品列表组件

<template><div class="product-list"><el-row :gutter="20"><el-col :span="6" v-for="product in products" :key="product.id"><el-card :body-style="{ padding: '0px' }" shadow="hover"><img :src="product.image" class="product-image"><div style="padding: 14px;"><h3>{{ product.name }}</h3><div class="price">¥{{ product.price }}</div><div class="bottom"><el-button type="text" @click="showDetail(product)">查看详情</el-button><el-button type="primary" size="small" @click="addToCart(product)">加入购物车</el-button></div></div></el-card></el-col></el-row><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="pagination.current":page-sizes="[12, 24, 36, 48]":page-size="pagination.size"layout="total, sizes, prev, pager, next, jumper":total="pagination.total"></el-pagination></div>
</template><script>
export default {data() {return {products: [],pagination: {current: 1,size: 12,total: 0}}},created() {this.fetchProducts()},methods: {fetchProducts() {// 调用API获取商品列表const { current, size } = this.paginationgetProducts({ page: current, pageSize: size }).then(res => {this.products = res.data.itemsthis.pagination.total = res.data.total})},handleSizeChange(val) {this.pagination.size = valthis.fetchProducts()},handleCurrentChange(val) {this.pagination.current = valthis.fetchProducts()},addToCart(product) {this.$store.dispatch('cart/addToCart', product)this.$message.success('已加入购物车')},showDetail(product) {this.$router.push(`/product/${product.id}`)}}
}
</script>

2.3 购物车模块

购物车组件

<template><div class="cart-container"><el-table :data="cartItems" style="width: 100%"><el-table-column prop="name" label="商品名称"></el-table-column><el-table-column prop="price" label="单价" width="120"></el-table-column><el-table-column label="数量" width="180"><template slot-scope="scope"><el-input-number v-model="scope.row.quantity" :min="1" @change="updateQuantity(scope.row)"></el-input-number></template></el-table-column><el-table-column label="小计" width="120"><template slot-scope="scope">¥{{ (scope.row.price * scope.row.quantity).toFixed(2) }}</template></el-table-column><el-table-column label="操作" width="120"><template slot-scope="scope"><el-button type="danger" icon="el-icon-delete" circle @click="removeItem(scope.row.id)"></el-button></template></el-table-column></el-table><div class="total-section"><span class="total-amount">总计: ¥{{ totalAmount.toFixed(2) }}</span><el-button type="primary" @click="checkout">结算</el-button></div></div>
</template><script>
export default {computed: {cartItems() {return this.$store.state.cart.items},totalAmount() {return this.cartItems.reduce((total, item) => {return total + (item.price * item.quantity)}, 0)}},methods: {updateQuantity(item) {this.$store.dispatch('cart/updateQuantity', {id: item.id,quantity: item.quantity})},removeItem(id) {this.$store.dispatch('cart/removeItem', id)},checkout() {if (this.cartItems.length === 0) {this.$message.warning('购物车为空')return}this.$router.push('/checkout')}}
}
</script>

三、状态管理(Vuex)

3.1 购物车状态管理

// store/modules/cart.js
const state = {items: []
}const mutations = {ADD_ITEM(state, product) {const existingItem = state.items.find(item => item.id === product.id)if (existingItem) {existingItem.quantity++} else {state.items.push({...product,quantity: 1})}},UPDATE_QUANTITY(state, { id, quantity }) {const item = state.items.find(item => item.id === id)if (item) {item.quantity = quantity}},REMOVE_ITEM(state, id) {state.items = state.items.filter(item => item.id !== id)},CLEAR_CART(state) {state.items = []}
}const actions = {addToCart({ commit }, product) {commit('ADD_ITEM', product)},updateQuantity({ commit }, payload) {commit('UPDATE_QUANTITY', payload)},removeItem({ commit }, id) {commit('REMOVE_ITEM', id)},clearCart({ commit }) {commit('CLEAR_CART')}
}export default {namespaced: true,state,mutations,actions
}

四、路由配置

// router/index.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from '../views/Home.vue'
import ProductList from '../views/ProductList.vue'
import ProductDetail from '../views/ProductDetail.vue'
import Cart from '../views/Cart.vue'
import Checkout from '../views/Checkout.vue'
import Login from '../views/Login.vue'Vue.use(Router)const router = new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home},{path: '/products',name: 'products',component: ProductList},{path: '/product/:id',name: 'product-detail',component: ProductDetail,props: true},{path: '/cart',name: 'cart',component: Cart,meta: { requiresAuth: true }},{path: '/checkout',name: 'checkout',component: Checkout,meta: { requiresAuth: true }},{path: '/login',name: 'login',component: Login}]
})// 路由守卫
router.beforeEach((to, from, next) => {const isAuthenticated = store.getters['user/isAuthenticated']if (to.matched.some(record => record.meta.requiresAuth) {if (!isAuthenticated) {next({ name: 'login', query: { redirect: to.fullPath } })} else {next()}} else {next()}
})export default router

五、API封装与Axios配置

// utils/request.js
import axios from 'axios'
import { Message } from 'element-ui'const service = axios.create({baseURL: process.env.VUE_APP_BASE_API,timeout: 5000
})// 请求拦截器
service.interceptors.request.use(config => {const token = localStorage.getItem('token')if (token) {config.headers['Authorization'] = `Bearer ${token}`}return config},error => {return Promise.reject(error)}
)// 响应拦截器
service.interceptors.response.use(response => {const res = response.dataif (res.code !== 200) {Message({message: res.message || 'Error',type: 'error',duration: 5 * 1000})return Promise.reject(new Error(res.message || 'Error'))} else {return res}},error => {Message({message: error.message,type: 'error',duration: 5 * 1000})return Promise.reject(error)}
)export default service

六、优化与部署

6.1 性能优化

组件懒加载：

const ProductList = () => import('../views/ProductList.vue')

路由懒加载：

{
path: '/products',
component: () => import('../views/ProductList.vue')
}

CDN引入：

// vue.config.js
module.exports = {configureWebpack: {externals: {'vue': 'Vue','element-ui': 'ELEMENT'}}
}

6.2 部署配置

// vue.config.js
module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/online-store/' : '/',outputDir: 'dist',assetsDir: 'static',productionSourceMap: false,devServer: {proxy: {'/api': {target: 'http://your-api-server.com',changeOrigin: true,pathRewrite: {'^/api': ''}}}}
}