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

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

提示

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

6. 启动应用程序并按类型搜索

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

bash

npm run dev

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

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

下一步

想要搜索自己的数据？在 Meilisearch 仪表盘中创建一个项目。查看我们的快速入门指南，获取分步说明。

编辑此页面

这有帮助吗？

想要包含更多细节？提出问题在我们公共文档库中。