Vue3 快速入门

1. 创建一个 Vue 应用程序

运行 npm create 工具来安装基本依赖项并创建应用程序文件夹结构。

bash

npm create vue@latest my-app

2. 安装搜索组件库

导航到您的 Vue 应用程序并安装 vue-instantsearch、@meilisearch/instant-meilisearch 和 instantsearch.css。

bash

npm install vue-instantsearch @meilisearch/instant-meilisearch instantsearch.css

Vue InstantSearch: 用于自定义搜索环境的前端工具
instant-meilisearch: 用于连接 Vue InstantSearch 的 Meilisearch 客户端
instantsearch.css (可选): 用于向搜索组件添加基本样式的 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 密钥指向包含 Steam 视频游戏数据的公共 Meilisearch 实例。

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>

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

提示

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

6. 启动应用程序并在您输入时搜索

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

bash

npm run dev

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

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

下一步

想要搜索您自己的数据吗？在 Meilisearch 仪表板中创建一个项目。查看我们的入门指南，了解逐步说明。

编辑此页面

这有帮助吗？

想要包含更多详细信息？提出问题在我们的公共文档存储库中。