1. 创建 Vue 应用程序
运行 npm create 工具以安装基本依赖项并创建您的应用程序文件夹结构。
npm create vue@latest my-app
2. 安装搜索组件库
导航到您的 Vue 应用程序并安装 vue-instantsearch、@meilisearch/instant-meilisearch 和 instantsearch.css。
npm install vue-instantsearch @meilisearch/instant-meilisearch instantsearch.css
3. 添加 InstantSearch
在 main.js 中包含 InstantSearch 以包含 Vue InstantSearch 库。
import { createApp } from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch/vue3/es';
const app = createApp(App);
app.use(InstantSearch);
app.mount('#app');
4. 初始化搜索客户端
将以下代码添加到 App.vue 文件中。
<template>
<ais-instant-search :search-client="searchClient" index-name="steam-videogames">
</ais-instant-search>
</template>
<script>
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
export default {
data() {
return {
searchClient: instantMeiliSearch(
'https://ms-adf78ae33284-106.lon.meilisearch.io',
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
).searchClient,
};
},
};
</script>
ais-instant-search 小部件是强制性包装器，允许您配置搜索。它需要两个 props：search-client 和 index-name。5. 添加搜索栏并列出搜索结果
在 ais-instant-search 包装器小部件内添加 ais-search-box 和 ais-hits 小部件。 导入 CSS 库以设置搜索组件的样式。<template>
<ais-instant-search :search-client="searchClient" index-name="steam-videogames">
<ais-search-box />
<ais-hits>
<template v-slot:item="{ item }">
<div>
<img :src="item.image" align="left" :alt="item.name"/>
<h2>{{ item.name }}</h2>
<p> {{ item.description }}</p>
</div>
</template>
</ais-hits>
</ais-instant-search>
</template>
<script>
import { instantMeiliSearch } from "@meilisearch/instant-meilisearch";
import "instantsearch.css/themes/satellite-min.css";
export default {
data() {
return {
searchClient: instantMeiliSearch(
'https://ms-adf78ae33284-106.lon.meilisearch.io',
'a63da4928426f12639e19d62886f621130f3fa9ff3c7534c5d179f0f51c4f303',
).searchClient,
};
},
};
</script>
使用以下 CSS 类为您的组件添加自定义样式：.ais-InstantSearch、.ais-SearchBox、.ais-InfiniteHits-list、.ais-InfiniteHits-item
6. 启动应用程序并进行即时搜索
通过运行以下命令启动应用程序：
现在打开浏览器，导航到您的 Vue 应用程序 URL（例如，localhost:5173），然后开始搜索。
遇到问题？查看我们实时演示中的实际代码！
下一步
想搜索您自己的数据吗？在 Meilisearch 控制面板中创建项目。请查看我们的入门指南以获取分步说明。
