​
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

将 InstantSearch 引入 main.js 以包含 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>

这些 URL 和 API 密钥指向一个公共 Meilisearch 实例，其中包含 Steam 视频游戏的数据。

ais-instant-search 小部件是必需的包装器，允许您配置搜索。它接收两个 props：search-client 和 index-name。

​
5. 添加搜索栏并列出搜索结果

将 ais-search-box 和 ais-hits 小部件添加到 ais-instant-search 包装器小部件内部。

导入 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>

使用 slot 指令自定义每个搜索结果的渲染方式。

使用以下 CSS 类为您的组件添加自定义样式：.ais-InstantSearch、.ais-SearchBox、.ais-InfiniteHits-list、.ais-InfiniteHits-item

​
6. 启动应用程序并即时搜索

通过运行以下命令启动应用程序

npm run dev

现在打开您的浏览器，导航到您的 Vue 应用程序 URL（例如 localhost:5173），然后开始搜索。

遇到问题？请在我们的实时演示中查看实际代码！

​
后续步骤

想搜索您自己的数据？在 Meilisearch 控制面板中创建一个项目。请查阅我们的快速入门指南以获取分步说明。