​
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>

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

ais-instant-search 组件是必需的包装器，允许你配置搜索功能。它接收两个属性：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>

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

​
6. 启动应用并实现实时搜索

运行以下命令启动应用：

npm run dev

现在打开浏览器，访问你的 Vue 应用 URL（例如 localhost:5173），即可开始搜索。

遇到问题？查看我们的在线演示中的代码示例！

​
后续步骤

想要搜索你自己的数据？在 Meilisearch 仪表板中创建项目。查看我们的入门指南获取分步指导。