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：Meilisearch 用戶端，用於與 Vue InstantSearch 連線
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 小工具是必要的包裝函式，可讓您設定搜尋。它接受兩個 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>

使用 slot 指示詞來自訂每個搜尋結果的轉譯方式。

提示

使用以下 CSS 類別來為元件新增自訂樣式：.ais-InstantSearch、.ais-SearchBox、.ais-InfiniteHits-list、.ais-InfiniteHits-item

6. 啟動應用程式並邊輸入邊搜尋

執行以下命令來啟動應用程式

bash

npm run dev

現在開啟您的瀏覽器，導覽至您的 Vue 應用程式 URL（例如，localhost:5173），然後開始搜尋。

遇到問題？在我們的即時示範中查看實際運作的程式碼！

後續步驟

想要搜尋您自己的資料嗎？在 Meilisearch 儀表板中建立專案。查看我們的入門指南，取得逐步指示。

編輯此頁面

這有幫助嗎？

想要包含更多詳細資訊？提出問題在我們的公開文件儲存庫中。