利用vue.js制作简易商品管理（有代码 ），项目需求： 1.商品添加功能，使用HTML5表单元素，设计商品添加界面，商品信息包括商品名称、商家、生产日期、保质期等字段。 2.商品搜索功能。 3.商品删除功能。

好的，这里给您提供一份代码实现简易商品管理系统的需求，使用Vue.js框架。

首先，需要在HTML中引入Vue.js的库文件：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

然后，需要创建一个Vue实例，并定义商品数据、搜索关键字、以及添加、搜索和删除商品的方法：

<div id="app">
  <h1>简易商品管理</h1>
  
  <!-- 商品添加表单 -->
  <form>
    <label>商品名称：</label>
    <input type="text" v-model="newItem.name">
    <br>
    <label>商家：</label>
    <input type="text" v-model="newItem.vendor">
    <br>
    <label>生产日期：</label>
    <input type="date" v-model="newItem.date">
    <br>
    <label>保质期：</label>
    <input type="text" v-model="newItem.expiry">
    <br>
    <button v-on:click.prevent="addItem">添加商品</button>
  </form>
  
  <!-- 商品搜索框 -->
  <input type="text" v-model="keyword">
  
  <!-- 商品列表 -->
  <ul>
    <li v-for="(item, index) in filteredItems" :key="index">
      {{ item.name }} - {{ item.vendor }} - {{ item.date }} - {{ item.expiry }}
      <button v-on:click="removeItem(index)">删除</button>
    </li>
  </ul>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: [
        { name: '苹果', vendor: '水果店', date: '2022-01-01', expiry: '30天' },
        { name: '牛奶', vendor: '超市', date: '2022-01-01', expiry: '7天' },
        { name: '面包', vendor: '面包店', date: '2022-01-01', expiry: '3天' },
        { name: '鸡蛋', vendor: '农贸市场', date: '2022-01-01', expiry: '15天' }
      ],
      newItem: {
        name: '',
        vendor: '',
        date: '',
        expiry: ''
      },
      keyword: ''
    },
    methods: {
      addItem: function() {
        this.items.push(this.newItem);
        this.newItem = { name: '', vendor: '', date: '', expiry: '' };
      },
      removeItem: function(index) {
        this.items.splice(index, 1);
      }
    },
    computed: {
      filteredItems: function() {
        var self = this;
        return this.items.filter(function(item) {
          return item.name.indexOf(self.keyword) !== -1 || item.vendor.indexOf(self.keyword) !== -1;
        });
      }
    }
  });
</script>

代码中，我们先定义了一个Vue实例，然后在data选项中定义了商品数据、搜索关键字以及添加商品的表单数据。在methods选项中定义了添加商品和删除商品的方法。在computed选项中定义了计算属性filteredItems，用于根据搜索关键字过滤商品列表。

最后，在HTML中使用v-model指令将表单数据与Vue实例中的数据绑定起来，并使用v-on指令绑定添加商品和删除商品的事件。使用v-for指令将商品列表渲染到页面上，并使用computed属性过滤商品列表。

综上所述，使用Vue.js框架实现简易商品管理系统非常方便，能够快速实现各项需求，同时提供良好的用户体验。