Vue.js教学第二十二章：vue实战项目商城项目

Vue 商城项目代码

• 创建 Vue 项目 ：使用 Vue CLI 创建项目，命令如下：

  • npm install -g @vue/cli ：全局安装 Vue CLI。

  • vue create vue-mall ：创建名为 vue-mall 的项目。

  • 进入项目目录并启动项目：cd vue-mall ，npm run serve。

• 安装依赖 ：安装 Vue Router 用于路由管理，npm install vue-router。

• 创建路由器文件 ：在 src 目录下创建 router.js，配置路由规则：

import Vue from 'vue'
import VueRouter 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 Order from './views/Order.vue'

Vue.use(VueRouter)

const routes = [
  { path: '/', redirect: '/home' },
  { path: '/home', component: Home },
  { path: '/products', component: ProductList },
  { path: '/product/:id', component: ProductDetail },
  { path: '/cart', component: Cart },
  { path: '/order', component: Order }
]

const router = new VueRouter({
  routes
})

export default router

• 创建 Vuex 存储 ：在 src 目录下创建 store.js，用于管理应用状态：

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

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    products: [],
    cart: []
  },
  mutations: {
    setProducts(state, products) {
      state.products = products
    },
    addToCart(state, product) {
      state.cart.push(product)
    },
    removeFromCart(state, productId) {
      state.cart = state.cart.filter(item => item.id !== productId)
    }
  },
  actions: {
    fetchProducts({ commit }) {
      // 模拟从后端获取商品数据
      setTimeout(() => {
        const products = [
          { id: 1, name: '商品1', price: 100, description: '这是商品1' },
          { id: 2, name: '商品2', price: 200, description: '这是商品2' },
          { id: 3, name: '商品3', price: 300, description: '这是商品3' }
        ]
        commit('setProducts', products)
      }, 1000)
    }
  },
  getters: {
    cartCount: state => state.cart.length,
    cartTotalPrice: state => state.cart.reduce((total, item) => total + item.price, 0)
  }
})

• 创建 Axios 实例 ：在 src 目录下创建 api.js，用于发送 HTTP 请求：

import axios from 'axios'

const api = axios.create({
  baseURL: 'https://api.example.com' // 替换为实际的 API 基础地址
})

export default api

• 创建首页组件 ：在 src/views 目录下创建 Home.vue，展示商城首页内容：

<template>
  <div class="home">
    <h1>欢