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>欢