vue实现移动商城
Vue 实现移动商城的核心步骤
项目初始化与配置
使用 Vue CLI 创建项目，安装必要依赖：
vue create mobile-mall
cd mobile-mall
npm install vue-router vuex vant axios --save配置 vant 按需引入，在 babel.config.js 中添加：
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}基础架构搭建
创建路由文件 src/router/index.js：
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{ path: '/', component: Home },
{ path: '/category', component: () => import('@/views/Category.vue') },
{ path: '/cart', component: () => import('@/views/Cart.vue') },
{ path: '/mine', component: () => import('@/views/Mine.vue') }
]
})配置 Vuex 状态管理 src/store/index.js：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
cartList: []
},
mutations: {
addToCart(state, item) {
state.cartList.push(item)
}
}
})移动端适配方案
安装 postcss 插件：
npm install postcss-pxtorem --save-dev配置 postcss.config.js：
module.exports = {
plugins: {
'postcss-pxtorem': {
rootValue: 37.5,
propList: ['*']
}
}
}核心页面实现
首页布局示例 (Home.vue)：
<template>
<div class="home">
<van-swipe :autoplay="3000">
<van-swipe-item v-for="(item, index) in banners" :key="index">
<img :src="item.image" />
</van-swipe-item>
</van-swipe>
<van-grid :column-num="4">
<van-grid-item
v-for="(item, index) in categories"
:key="index"
:icon="item.icon"
:text="item.name"
/>
</van-grid>
</div>
</template>
<script>
export default {
data() {
return {
banners: [
{ image: 'https://img01.yzcdn.cn/vant/apple-1.jpg' },
{ image: 'https://img01.yzcdn.cn/vant/apple-2.jpg' }
],
categories: [
{ name: '分类1', icon: 'photo-o' },
{ name: '分类2', icon: 'photo-o' }
]
}
}
}
</script>商品详情页实现
<template>
<div class="detail">
<van-image :src="product.image" />
<van-cell-group>
<van-cell title="商品名称" :value="product.name" />
<van-cell title="商品价格" :value="'¥' + product.price" />
</van-cell-group>
<van-submit-bar
:price="product.price*100"
button-text="加入购物车"
@submit="addToCart"
/>
</div>
</template>
<script>
export default {
data() {
return {
product: {
id: 1,
name: '示例商品',
price: 99,
image: 'https://img01.yzcdn.cn/vant/apple-3.jpg'
}
}
},
methods: {
addToCart() {
this.$store.commit('addToCart', this.product)
this.$toast.success('添加成功')
}
}
}
</script>购物车功能实现
<template>
<div class="cart">
<van-checkbox-group v-model="checked">
<van-swipe-cell v-for="(item, index) in cartList" :key="index">
<van-checkbox :name="item.id" />
<van-card
:num="item.count"
:price="item.price"
:desc="item.desc"
:title="item.name"
:thumb="item.image"
/>
</van-swipe-cell>
</van-checkbox-group>
<van-submit-bar
:price="totalPrice"
button-text="提交订单"
@submit="onSubmit"
/>
</div>
</template>
<script>
export default {
computed: {
cartList() {
return this.$store.state.cartList
},
totalPrice() {
return this.cartList.reduce((sum, item) => sum + item.price*100, 0)
}
},
methods: {
onSubmit() {
this.$dialog.confirm({
title: '确认订单',
message: '确认支付吗？'
})
}
}
}
</script>移动端优化技巧
添加 viewport meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">使用 rem 布局时，在 main.js 添加：
document.documentElement.style.fontSize = window.innerWidth / 10 + 'px'
window.addEventListener('resize', () => {
document.documentElement.style.fontSize = window.innerWidth / 10 + 'px'
})项目部署
构建生产环境代码：
npm run build配置 nginx 服务器：
server {
listen 80;
server_name yourdomain.com;
root /path/to/dist;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}扩展功能建议
- 集成支付 SDK（如微信/支付宝）
- 添加商品搜索功能
- 实现用户评价系统
- 增加优惠券模块
- 开发后台管理系统对接 API
以上实现方案采用 Vue 2.x 语法，如需使用 Vue 3，需相应调整组合式 API 写法。实际开发中应对接真实后端 API 接口，示例中的静态数据仅作演示用途。
