vue开发商城项目步骤和配置全过程

vue create mall-project

npm init vue@latest mall-project

npm install axios vue-router@4 pinia element-plus sass

src/
├── assets/          # 静态资源
├── components/      # 公共组件
├── views/           # 页面级组件
├── stores/          # Pinia状态管理
├── router/          # 路由配置
├── utils/           # 工具函数
├── styles/          # 全局样式
├── api/             # 接口封装
└── App.vue          # 根组件

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue')
  },
  {
    path: '/product/:id',
    component: () => import('@/views/ProductDetail.vue')
  },
  {
    path: '/cart',
    component: () => import('@/views/Cart.vue')
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    items: []
  }),
  actions: {
    addItem(product) {
      const existItem = this.items.find(item => item.id === product.id)
      existItem ? existItem.quantity++ : this.items.push({ ...product, quantity: 1 })
    }
  },
  getters: {
    totalPrice: (state) => state.items.reduce((total, item) => total + item.price * item.quantity, 0)
  }
})

import axios from 'axios'

const instance = axios.create({
  baseURL: 'https://your-api-endpoint.com'
})

export const getProducts = () => instance.get('/products')
export const getProductDetail = (id) => instance.get(`/products/${id}`)

import '@/styles/main.scss'

<template>
  <div class="product-list">
    <el-card v-for="product in products" :key="product.id">
      <img :src="product.image" />
      <h3>{{ product.name }}</h3>
      <p>¥{{ product.price }}</p>
      <el-button @click="addToCart(product)">加入购物车</el-button>
    </el-card>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { getProducts } from '@/api/product'
import { useCartStore } from '@/stores/cart'

const cartStore = useCartStore()
const products = ref([])

const fetchProducts = async () => {
  const res = await getProducts()
  products.value = res.data
}

const addToCart = (product) => {
  cartStore.addItem(product)
}

fetchProducts()
</script>

// vite示例
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
  server: {
    proxy: {
      '/api': {
        target: 'http://your-api-server.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

npm run build

server {
  listen 80;
  location / {
    root /path/to/dist;
    try_files $uri $uri/ /index.html;
  }
}