Hi，我是布蘭妮甜 ！在當今數字化時代，電子商務已成為商業領域的重要組成部分。開發一個功能完善、用戶友好的在線商店應用對于企業拓展市場至關重要。本文將詳細介紹如何使用Vue2框架配合ElementUI組件庫開發一個完整的在線商店應用。

---

---

一、項目初始化與配置

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 性能優化

1. 組件懶加載：

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

2. 路由懶加載：

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

3. 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': ''}}}}
}

七、總結

本文詳細介紹了如何使用Vue2和ElementUI開發一個功能完整的在線商店應用。我們從項目初始化開始，逐步實現了用戶認證、商品展示、購物車管理等核心功能模塊，并介紹了狀態管理、路由配置、API封裝等關鍵技術點。

通過ElementUI豐富的組件庫，我們能夠快速構建出美觀、響應式的用戶界面，而Vue2的響應式特性和組件化開發模式則大大提高了開發效率和代碼可維護性。

希望本文能為開發者提供一個全面的參考，幫助您快速構建自己的在線商店應用。