基于 Vue.js 的移动端购物商城附详细代码

基于 Vue.js 的移动端购物商城，可以使用 Vue CLI 快速搭建项目，同时使用 Vue Router 实现路由跳转和状态管理，使用 Axios 发送 HTTP 请求获取数据。以下是一个简单的示例，包含了商品列表、商品详情、购物车等功能。

1. 安装 Vue CLI

首先需要安装 Vue CLI，可以使用以下命令：

npm install -g @vue/cli

2. 创建项目

使用 Vue CLI 创建项目，可以使用以下命令：

vue create my-project

根据提示选择需要的配置项，选择手动配置可以选择需要的插件和功能。

3. 安装依赖

安装需要的依赖，可以使用以下命令：

npm install axios vue-router vant --save

其中，axios 是用于发送 HTTP 请求的库，vue-router 是用于实现路由跳转和状态管理的库，vant 是一个基于 Vue.js 的移动端 UI 组件库。

4. 编写代码

在 src 目录下创建以下文件：

• api.js：用于定义 API 接口，包括获取商品列表、商品详情等接口。
• router.js：用于定义路由，包括商品列表、商品详情、购物车等页面。
• store.js：用于定义状态管理，包括购物车中的商品列表、商品数量等状态。
• views 目录：用于存放页面组件，包括商品列表、商品详情、购物车等组件。
• components 目录：用于存放通用组件，例如头部、底部等组件。

以下是一个简单的示例代码，仅供参考：

api.js

import axios from 'axios'

const baseUrl = 'https://api.example.com'

export function getGoodsList () {
  return axios.get(`${baseUrl}/goods`)
}

export function getGoodsDetail (id) {
  return axios.get(`${baseUrl}/goods/${id}`)
}

router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import GoodsList from './views/GoodsList.vue'
import GoodsDetail from './views/GoodsDetail.vue'
import Cart from './views/Cart.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'goodsList',
    component: GoodsList
  },
  {
    path: '/goods/:id',
    name: 'goodsDetail',
    component: GoodsDetail
  },
  {
    path: '/cart',
    name: 'cart',
    component: Cart
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    cartList: []
  },
  mutations: {
    addToCart (state, goods) {
      const index = state.cartList.findIndex(item => item.id === goods.id)
      if (index === -1) {
        state.cartList.push({
          id: goods.id,
          name: goods.name,
          price: goods.price,
          quantity: 1
        })
      } else {
        state.cartList[index].quantity++
      }
    },
    removeFromCart (state, id) {
      const index = state.cartList.findIndex(item => item.id === id)
      if (index !== -1) {
        state.cartList.splice(index, 1)
      }
    }
  },
  actions: {
    addToCart ({ commit }, goods) {
      commit('addToCart', goods)
    },
    removeFromCart ({ commit }, id) {
      commit('removeFromCart', id)
    }
  },
  getters: {
    cartList: state => state.cartList,
    cartTotal: state => state.cartList.reduce((total, item) => total + item.quantity, 0),
    cartAmount: state => state.cartList.reduce((total, item) => total + item.price * item.quantity, 0)
  }
})

views/GoodsList.vue

<template>
  <div>
    <ul>
      <li v-for="goods in goodsList" :key="goods.id">
        <router-link :to="{ name: 'goodsDetail', params: { id: goods.id } }">
          <img :src="goods.image" alt="">
          <div>{{ goods.name }}</div>
          <div>{{ goods.price }}</div>
        </router-link>
        <button @click="addToCart(goods)">加入购物车</button>
      </li>
    </ul>
  </div>
</template>

<script>
import { getGoodsList } from '../api'
import { mapActions } from 'vuex'

export default {
  name: 'GoodsList',
  data () {
    return {
      goodsList: []
    }
  },
  methods: {
    ...mapActions(['addToCart']),
    getGoodsList () {
      getGoodsList()
        .then(response => {
          this.goodsList = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  },
  mounted () {
    this.getGoodsList()
  }
}
</script>

views/GoodsDetail.vue

<template>
  <div>
    <img :src="goods.image" alt="">
    <div>{{ goods.name }}</div>
    <div>{{ goods.price }}</div>
    <button @click="addToCart(goods)">加入购物车</button>
  </div>
</template>

<script>
import { getGoodsDetail } from '../api'
import { mapActions } from 'vuex'

export default {
  name: 'GoodsDetail',
  data () {
    return {
      goods: {}
    }
  },
  methods: {
    ...mapActions(['addToCart']),
    getGoodsDetail () {
      const id = this.$route.params.id
      getGoodsDetail(id)
        .then(response => {
          this.goods = response.data
        })
        .catch(error => {
          console.error(error)
        })
    }
  },
  mounted () {
    this.getGoodsDetail()
  }
}
</script>

views/Cart.vue

<template>
  <div>
    <ul>
      <li v-for="goods in cartList" :key="goods.id">
        <div>{{ goods.name }}</div>
        <div>{{ goods.price }}</div>
        <div>
          <button @click="removeFromCart(goods.id)">-</button>
          <span>{{ goods.quantity }}</span>
          <button @click="addToCart(goods)">+</button>
        </div>
        <div>{{ goods.price * goods.quantity }}</div>
      </li>
    </ul>
    <div>总数量：{{ cartTotal }}</div>
    <div>总金额：{{ cartAmount }}</div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'

export default {
  name: 'Cart',
  computed: {
    ...mapGetters(['cartList', 'cartTotal', 'cartAmount'])
  },
  methods: {
    ...mapActions(['addToCart', 'removeFromCart'])
  }
}
</script>

api/index.js

import axios from 'axios'

const instance = axios.create({
  baseURL: 'http://localhost:3000',
  timeout: 5000
})

export const getGoodsList = () => {
  return instance.get('/goods')
}

export const getGoodsDetail = (id) => {
  return instance.get(`/goods/${id}`)
}

App.vue

<template>
  <div id="app">
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import GoodsList from '../views/GoodsList.vue'
import GoodsDetail from '../views/GoodsDetail.vue'
import Cart from '../views/Cart.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'goodsList',
    component: GoodsList
  },
  {
    path: '/goods/:id',
    name: 'goodsDetail',
    component: GoodsDetail
  },
  {
    path: '/cart',
    name: 'cart',
    component: Cart
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router