Daten aus einer API von Drittanbietern mit Vue.js und Axios abrufen

Dieses Tutorial zeigt, dass das Erstellen einer einfachen Nachrichten -App mit Vue.js und der New York Times API erstellt wird. Die App zeigt Top -Nachrichtenartikel an und ermöglicht die Filterung nach Kategorie.

Voraussetzungen: node.js, Garn (mit npm i -g yarn installieren) und grundlegendes Vue.js -Wissen.

Schlüsselschritte:

1. Projekt -Setup: Erstellen Sie ein Vue 3 -Projekt mit VITE: yarn create @vitejs/app vue-news-app --template vue. Navigieren Sie zum Projektverzeichnis (cd vue-news-app) und installieren Sie Abhängigkeiten (yarn install).

2. API -Schlüssel: Erhalten Sie einen API -Schlüssel der New York Times von ihrer Anmeldeseite.

3. Styling: MADSWind CSS installieren: yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest. Initialisieren Sie Rückenwind: npx tailwindcss init -p. Line-Clamp-Plugin installieren: yarn add @tailwindcss/line-clamp. Konfigurieren Sie tailwind.config.js (siehe Original für Details) und erstellen Sie index.css (siehe Original für Details).

4. Anwendungslayout: create Layout.vue, Header.vue und Footer.vue (siehe Original für Code). Aktualisieren Sie App.vue, um diese Komponenten zu verwenden.

5. Datenbehandlung: erstellen src/posts.json (optional für Ersttests). Erstellen Sie die Komponenten NewsCard.vue, NewsList.vue und NewsFilter.vue (siehe Original für Code). Aktualisieren Sie App.vue, um diese Komponenten einzuschließen.

6. API -Integration (Axios): Axios installieren: yarn add axios. Speichern Sie Ihre API -Taste in einer .env -Datei (z. B. VITE_NYT_API_KEY=YOUR_API_KEY). Aktualisieren Sie App.vue, um Axios zum Abholen von Daten aus der Nytimes -API (siehe Original für detaillierte Code). Dies beinhaltet Fehlerbehebung und Datenumwandlung. Ändern Sie NewsFilter.vue, um den API -Aufruf auszulösen (siehe Original für Änderungen).

7. endgültige Details: (optional) Ladeindikatoren oder andere Verbesserungen hinzufügen.

Beispiel -API -Aufrufe:

<code>https://api.nytimes.com/svc/topstories/v2/arts.json?api-key=YOUR_API_KEY
https://api.nytimes.com/svc/topstories/v2/home.json?api-key=YOUR_API_KEY</code>

Kompletter Code: Verfügbar auf GitHub (Link im Original angegeben). Eine Stackblitz -Demo (mit begrenzter Funktionalität) ist ebenfalls verfügbar (Link in Original).

FAQs: (siehe Original für detaillierte FAQs auf VUE.js, abrufen Daten von APIs und JSON und Best Practices für API -Aufrufe innerhalb von Vue.js)

Diese umgeschriebene Reaktion behält die Kerninformationen bei gleichzeitiger Vereinfachung der Sprache und Struktur, so dass sie prägnanter und einfacher zu befolgen ist. Die Bild -URLs sind erhalten.

Das obige ist der detaillierte Inhalt vonDaten aus einer API von Drittanbietern mit Vue.js und Axios abrufen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!