提供用vue 前端框架写的类似 Microsoft Store界面源代码

好的，这里提供一个简单的源代码供参考：

<template>
  <div>
    <div class="header">
      <h1>Microsoft Store</h1>
      <input type="text" v-model="searchText" placeholder="Search products...">
    </div>
    <div class="products">
      <div class="product" v-for="product in filteredProducts" :key="product.id">
        <img :src="product.image" :alt="product.name">
        <h2>{{ product.name }}</h2>
        <p>{{ product.price }}</p>
        <button @click="addToCart(product)">Add to cart</button>
      </div>
    </div>
    <div class="cart">
      <h2>Cart</h2>
      <ul>
        <li v-for="item in cart" :key="item.id">
          {{ item.name }} - {{ item.price }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: 'Product 1', price: '$10', image: 'product1.png' },
        { id: 2, name: 'Product 2', price: '$20', image: 'product2.png' },
        { id: 3, name: 'Product 3', price: '$30', image: 'product3.png' },
        { id: 4, name: 'Product 4', price: '$40', image: 'product4.png' },
        { id: 5, name: 'Product 5', price: '$50', image: 'product5.png' }
      ],
      cart: [],
      searchText: ''
    }
  },
  computed: {
    filteredProducts() {
      return this.products.filter(product => {
        return product.name.toLowerCase().includes(this.searchText.toLowerCase());
      });
    }
  },
  methods: {
    addToCart(product) {
      this.cart.push(product);
    }
  }
}
</script>

<style>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
}

.products {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 20px;
  padding: 20px;
}

.product {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.product img {
  width: 100%;
  max-width: 200px;
  height: auto;
}

.cart {
  padding: 20px;
}

.cart h2 {
  margin-bottom: 10px;
}

.cart ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.cart li {
  margin-bottom: 5px;
}
</style>

这个示例代码中，我们使用了 Vue 的组件化开发方式，将整个页面拆分成多个组件，包括 header、products 和 cart 等。其中，products 组件用来展示所有的产品，并且可以根据用户输入的搜索文本进行过滤；cart 组件用来展示用户已经添加到购物车中的产品。

在 JavaScript 代码中，我们使用了 computed 属性来实现根据搜索文本进行过滤的功能，并且使用了 methods 属性来实现添加产品到购物车的功能。同时，我们还使用了 Vue 的双向绑定功能来实现搜索框的实时响应。

最后，我们使用了一些简单的 CSS 样式来美化页面，使得界面更加美观和易读。