Veröffentlicht am 24-02-2019

So richten Sie eine responsive UI-Suche in Vue.js ein

Foto von saeed mhmdi auf Unsplash

Denken Sie darüber nach, mit einem der beliebten modernen Frameworks derzeit etwas Großartiges zu bauen, wissen aber nicht, wie Sie damit beginnen sollen?

Wenn ja, hilft Ihnen dieser Beitrag, einen Kick zu starten und etwas Großartiges zu bauen.

Was werden wir bauen?

Wir werden eine responsive clientseitige Suche der 7 Wunder der Welt mit den folgenden Funktionen erstellen:

  1. Textsuche und Filter basierend auf Bewertungen und Likes.
  2. 2 Elemente pro Zeile für Tablet und Desktop, 1 Element pro Zeile für Mobile.
  3. Daten asynchron von der externen API auf der Clientseite abrufen.
  4. Responsive Ansicht wie unten gezeigt:
Links ist die Dektop / Tablet-Ansicht und rechts die Mobile-Ansicht

Live-Demo: https://vue-responsive-search.herokuapp.com

Quellcode: https://github.com/honey93/VueSearchExample

Tech-Architektur

Wir werden mit folgenden Technologien arbeiten:

  1. Vue.js: Das progressive JavaScript-Framework
    1. BootstrapVue: Bietet eine der umfassendsten Implementierungen der Bootstrap V4-Komponenten und des Rastersystems, die für Vue.js 2.5+ verfügbar sind, einschließlich umfassender und automatisierter WAI-ARIA-Eingabehilfen.
    2. Vue Cli 3: Standardwerkzeug für die Entwicklung von Vue.js
    3. Projektstruktur

      Um mit unserem Vue-Projekt zu beginnen, müssen wir viele Dinge wie Vue, Bootstrap, Vue Router, Vuex usw. einrichten.

      Vue Cli bietet uns den Befehl, das Projekt mit den meisten erforderlichen Konfigurationen zu erstellen.

      npm install -g @ vue / cli
      vue create Projektname

      Für die restlichen Dinge wie BootstrapVue, Vue-Star-Rating usw. können wir den Befehl npm install verwenden.

      Das mit vuecli erstellte Standardprojekt hat folgende Struktur:

      /Root-Verzeichnis
       
       Öffentlichkeit/
      
       src /
        
        Assets / / * Statische Assets wie Bilder gehen hier * /
        Komponenten / / * Kleiner Teil einer Ansicht * /
        views / / * View stellt eine Seite dar, die aus mehreren Komponenten besteht * /
        App.vue / * Die Hauptansicht, in die die Routing-Logik geht * /
        main.js / * App-Initialisierung geschieht hier * /
        router.js / * Router-Logik wird hier definiert * /
        store.js / * Optionale Zustandsverwaltungsbibliothek Vuex * /
      
       package.json / * Sie besteht aus allen Abhängigkeiten des Projekts. * /
       ......

      Die oben genannten Dinge erklären Ihnen die Projektarchitektur und die Art und Weise, wie Sie diese initialisieren.

      Wir können anfangen, indem wir das Repository klonen und die folgenden Befehle schreiben:

      npm installieren
      npm run dienen

      Einige wichtige Komponenten erklärt:

      Komponenten / Header.vue

      Der Header wurde in Form einer einzelnen unabhängigen Komponente erstellt, sodass er auf Seiten wiederverwendet werden kann, um eine Verdoppelung des Codes zu vermeiden.

      / * Vue-Stil der Schreibkomponente: Vorlage, Skript und Stil * /
      
        
          
             Responsive Suche