搜索可能很难正确。 您想向您的客户提供实时结果，但要做到这一点，您要么需要一个棘手的服务器设置和大量数据库访问，要么需要一个专门用于搜索的服务器，或者在搜索之前将您用于搜索的所有内容上传到客户端......或者您可以只使用 Algolia InstantSearch。 （不，这不是或任何东西。）它是一种托管解决方案，可让您将想要索引的数据推送到他们的服务器。 从那里，您可以使用非常简单的组件向您的 Vue.js 应用程序添加实时搜索。
让我们来看看。
入门
使用 vue-cli 和 webpack-simple 模板启动一个简单的 Vue 项目。
接下来，安装 vue-instantsearch。
# Yarn $ yarn add vue-instantsearch # NPM $ npm install vue-instantsearch --save
设置
现在，在 main.js 中启用插件。 这很简单。
main.js
import Vue from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
new Vue({
template: '<router-view></router-view>'
})
.$mount('#app');
添加搜索
在 App.vue 中，让我们使用 Algolia 的最基本设置添加一个搜索部分。
vue-instantsearch 使用 react 风格的包装组件，将“真实”的可渲染组件包装在虚拟组件中，为他们的孩子提供数据和功能。
您需要的第一个是 ais-index。 这提供了 Algolia InstantSearch 查找结果所需的连接信息。 如果您在 Algolia 仪表板中设置了帐户和索引，则可以在您的 Algolia 仪表板中找到您的 app-id、api-key 和 index-name。 现在我们将只使用他们提供的演示凭据。
下一个组件是 ais-search-box。 它呈现（惊喜）一个搜索框。 （加上一个漂亮的小搜索和清除按钮。）
接下来是 ais-results 组件。 这个有点意思。 它使用 范围的插槽 允许您提供自己的搜索结果模板来呈现。 这意味着，如果您的搜索结果中有图像 URL，您只需输入 img 标记并设置 src 属性和繁荣，搜索结果与图像。
这里的最后一个组件是 ais-highlight。 它将在 <em></em> 标签中的结果对象上包装特定属性的匹配部分（由 attribute-name 指定）。 （可以自定义。）这意味着如果您搜索 Something 并且您的结果对象看起来像这样，
{
"name": "The Book of Something"
}
结果输出将如下所示：<p>The book of <em>something</em><p>。 突出显示是一个令人沮丧的手动实现功能，因此它们为它提供开箱即用的支持真是太好了。
应用程序.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
<h2>Search For Stuff</h2>
<ais-index
app-id="latency"
api-key="3d9875e51fbd20c7754e65422f7ce5e1"
index-name="bestbuy"
>
<ais-search-box></ais-search-box>
<ais-results>
<template slot-scope="{ result }">
<p>
<ais-highlight :result="result" attribute-name="name"></ais-highlight>
</p>
</template>
</ais-results>
</ais-index>
</div>
</template>
...
一旦你这样做了，你应该完成了！ 启动开发服务器，在搜索框中输入一些内容，然后立即查看结果！
现在剩下的就是将 API 密钥切换为您拥有的东西，尝试一些其他可用的组件，为它们设置样式，创建自定义组件，玩得开心！
