header.vue，cart.vue, search.vue全部项目的代码

views

<template>
   <div>
       <Search />
       <Cart />
   </div>
</template>

<script>
import Search from '../components/Search.vue'
import Cart from '../components/Cart.vue'
export default {
  components: { 
      Search,
      Cart
       },
}
</script>

<style>

</style>

cart.vue

<template>
    <a href="javascript:;" @click="cart"></a>
    <span>购物车{{ cartItemsCount }}</span>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'Cart',
    components: {},
    computed: {
        ...mapGetters('cart', {
            cartItemsCount: 'itemsCount'
        })
    },
    methods: {
        cart() {
            this.$router.push("/cart")
        }
    }
}
</script>

<style scoped>
.headerCart {
    display: inline-block; 
    position: relative;
    text-align: center;
    width: 100px;
    height: 30px;
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    margin-left: 20px;
    background-color:red;
    vertical-align: middle;
}

.headerCart a {
    text-decoration: none;
    color: white;
    
}
.headerCart a > span{
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 5px;
}
</style>

search.vue

<template>
    <input type="search" v-model.trim="keyword">
    <button @click="search">搜索</button>
</template>

<script>

export default ({
   name: 'Search',
   data() {
       return {
           keyword: ''
       }
   },
   methods: {
       search() {
           if(this.keywords != this.$route.query.wd)
               this.$router.push({path: '/search', query: {wd: this.keyword}})
       }
   }
})
</script>

<style scoped>
.headerSearch {
    display: inline-block; 
    position: relative;
}
.headerSearch input {
    width: 400px;
    height: 30px;
}

.headerSearch button{
    position: absolute;
    right: 0px;
    top: 0;
    width: 60px;
    height: 30px;
    margin: 0;
    border: none;
    color: white;
    background-color: red;
    cursor: pointer;
}
</style>

App.vue

<template>
  <Header />
  
</template>

<script>
import Header from './views/Header.vue'


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

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

store/modules
cart.js

const state = {
    items: []
  }
  //mutations
  const mutations = {
    //添加商品到购物车中
    pushProductToCart(state, { id, imgUrl, title, price, quantity}) {
      if(! quantity)
        quantity = 1;
      state.items.push({ id, imgUrl, title, price, quantity });
    },
  
    //增加商品数量
    incrementItemQuantity(state, { id, quantity }) {
      let cartItem = state.items.find(item => item.id == id);
      cartItem.quantity += quantity;
    },
    //用于清空购物车
    setCartItems(state, { items }) {
      state.items = items
    },
  
    //删除购物车中的商品
    deleteCartItem(state, id){
      let index = state.items.findIndex(item => item.id === id);
      if(index > -1)
        state.items.splice(index, 1);
    }
  }
  
  //getters
  const getters = {
    //计算购物车中所有商品的总价
    cartTotalPrice: (state) => {
      return state.items.reduce((total, product) => {
        return total + product.price * product.quantity
      }, 0)
    },
    //计算购物车中单项商品的价格
    cartItemPrice: (state) => (id) => {
      if (state.items.length > 0) {
        const cartItem = state.items.find(item => item.id === id);
        if (cartItem) {
          return cartItem.price * cartItem.quantity;
        }
      }
    },
    //获取购物车中商品的数量
    itemsCount: (state) => {
      return state.items.length;
    }
  }
  
  //actions
  const actions = {
    //增加任意数量的商品到购物车
    addProductToCart({ state, commit }, 
      { id, imgUrl, title, price, inventory, quantity }) {
      if (inventory > 0) {
        const cartItem = state.items.find(item => item.id == id);
        if (!cartItem) {
          commit('pushProductToCart', { id, imgUrl, title, price, quantity })
        } else {
          commit('incrementItemQuantity', { id, quantity })
        }
      }
    }
  }
  
  export default {
    namespaced: true,
    state,
    mutations,
    getters,
    actions
  }

user.js

const state = {
    user: null
  }
  // mutations
  const mutations = {
    saveUser(state, {username, id}){
      state.user = {username, id}
    },
    deleteUser(state){
      state.user = null;
    }
  }
  
  export default {
    namespaced: true,
    state,
    mutations,
  }

index.js

import { createStore } from 'vuex'

import cart from './modules/cart'
import user from './modules/user'
import createPersistedState from "vuex-persistedstate"

export default createStore({
  modules: {
    cart,
    user
  },
  plugins: [createPersistedState()]
})

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'

axios.defaults.baseURL = "/api"

createApp(App).use(router).use(VueAxios, axios).use(store).mount('#app')

vue.config.js

module.exports = {
    devServer: {
        proxy: {
            'api': {
                target: 'http://111.229.37.167/',
                changeOrigin: true,
            }
        }
    }
}

router/index.js

import { createRouter, createWebHashHistory } from "vue-router";
import Search from '@/components/Search'

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
        path: '/',
        component: Search
    }
    ]
})

export default router;