vue+elementui实现联想购物商城，样式美观大方

要使用Vue和Element UI实现一个联想购物商城，你可以使用Element UI的el-input组件来实现搜索框，并使用el-autocomplete组件来实现联想功能。以下是一个简单的例子：

<template>
  <div id="app">
    <el-autocomplete
      class="inline-input"
      v-model="searchText"
      :fetch-suggestions="querySearch"
      placeholder="请输入商品名称"
      @select="handleSelect"
    ></el-autocomplete>
  </div>
</template>
 
<script>
export default {
  name: 'App',
  data() {
    return {
      searchText: '',
      products: [
        { "value": "手机" },
        { "value": "笔记本电脑" },
        { "value": "平板电脑" },
        // ... 更多商品
      ]
    };
  },
  methods: {
    querySearch(queryString, cb) {
      var products = this.products;
      var results = queryString ? products.filter(this.createFilter(queryString)) : products;
      // 调用 callback 返回建议列表的数据
      cb(results);
    },
    createFilter(queryString) {
      return (product) => {
        return (product.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      console.log('选中的商品:', item);
      // 处理选中的商品，例如跳转到商品详情页等
    }
  }
};
</script>
 
<style>
.inline-input {
  width: 400px;
  margin-right: 10px;
}
</style>

在这个例子中，我们定义了一个简单的数据模型products来存储商品信息。querySearch方法根据用户的输入实时过滤商品，createFilter函数用于创建一个用于比较的函数。handleSelect方法用于处理用户选择某个建议后的行为。

确保你已经安装了Vue和Element UI依赖，并在你的项目中正确引入了Element UI。

npm install vue
npm install element-ui

在你的main.js或相应的入口文件中：

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
 
Vue.use(ElementUI);

这样就可以运行上面的代码，并在Vue应用中实现一个功能完善的联想搜索框。