vue innersearch

InnerSearch: Vue.js-Komponenten für ElasticSearch

Was ist InnerSearch?

Ein Open-Source-Projekt, das entwickelt wurde, um Entwicklern bei der Arbeit mit vue.js und Elastic zu helfen und ihnen die Möglichkeit zu geben, Such-UIs innerhalb einer Stunde zu erstellen.

InnerSearch ist eine Suite von UI-Komponenten wie SearchBox, RefinementListFilter, Paginator und vielen anderen, die mit Vue.js erstellt werden.

Das Ziel besteht darin, mithilfe deklarativer Komponenten schnell schöne spezifizierte Suchschnittstellen zu erstellen, ohne ein Experte für ElasticSearch und Vue.js zu sein.

Dank Komponenten-Requisiten und Slot-Funktionen von Vue.js sind die Komponenten leicht anpassbar

Ein UI-Beispielaufbau mit InnerSearch:

Entsprechender Code:

 < div class =" columns " >
    < div class =" column is-one-fifth " >
        < div >
            < refinement-list-filter :field =" 'state' " > </ refinement-list-filter >
            < refinement-list-filter :field =" 'gender' " > </ refinement-list-filter >
        </ div >
    </ div >
    < div class =" column " >
        < div >
            < searchbox :field =" 'firstname' " > </ searchbox >
            < div style =" margin: 20px auto;width: 90% " >
                < search-button > </ search-button >
                < reset-button > </ reset-button >
            </ div >
            < hits > </ hits >

            < paginate :previousText =" 'Previous page' " :nextText =" 'Next page' " :size =" 10 " > </ paginate >
        </ div >
     </ div >
</ div > 

Schnellstart

Zur Kasse gehen Starter-App von InnerSearch Starter-App

Siehe vollständige Dokumentation

Installation über NPM

$ npm install --save vue-innersearch

Verwendung als <script> -Tag

vue-innersearch benötigt Vue und Vuex, um zu funktionieren

  < script src =" https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js " > </ script >
  < script src =" https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.min.js " > </ script >
  < script src =" https://unpkg.com/[email protected]/vue-innersearch.min.js " > </ script >

Sehen Sie sich in unserem Jsbin-Beispiel an, wie Sie den eigenständigen UMD-Build verwenden

Kurze Einführung

Live-Demo

Lizenz