当前位置：首页 > VUE

vue实现移动商城

2026-01-18 01:27:06VUE

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;
  }
}