Récupérer les données d'une API tierce avec Vue.js et Axios

Ce tutoriel démontre la création d'une application de nouvelles simples à l'aide de Vue.js et de l'API du New York Times. L'application affiche les meilleurs articles de presse et permet le filtrage par catégorie.

Prérequis: node.js, yarn (installer avec npm i -g yarn) et connaissances de base vue.js.

Étapes de la clé:

1. Configuration du projet: Créer un projet Vue 3 en utilisant VITE: yarn create @vitejs/app vue-news-app --template vue. Accédez au répertoire du projet (cd vue-news-app) et installez les dépendances (yarn install).

2. Clé API: Obtenez une clé API du New York Times à partir de leur page d'inscription.

3. Styling: Installez CSS Tailwind: yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest. Initialiser le vent arrière: npx tailwindcss init -p. Installez le plugin de ligne de ligne: yarn add @tailwindcss/line-clamp. Configurez tailwind.config.js (voir Original pour plus de détails) et créez index.css (voir Original pour plus de détails).

4. Disposition des applications: Créer Layout.vue, Header.vue et Footer.vue Composants (voir original pour le code). Mise à jour App.vue pour utiliser ces composants.

5. Gestion des données: Créer src/posts.json (facultatif, pour les tests initiaux). Créer des composants NewsCard.vue, NewsList.vue et NewsFilter.vue (voir Original pour le code). Mise à jour App.vue pour inclure ces composants.

6. Intégration de l'API (Axios): Installez Axios: yarn add axios. Stockez votre clé API dans un fichier .env (par exemple, VITE_NYT_API_KEY=YOUR_API_KEY). Mettre à jour App.vue pour utiliser Axios pour récupérer les données de l'API NYTimes (voir Original pour le code détaillé). Cela inclut la gestion des erreurs et la transformation des données. Modifier NewsFilter.vue pour déclencher l'appel de l'API (voir Original pour les modifications).

7. touches finales: (facultative) Ajouter des indicateurs de chargement ou d'autres améliorations.

Exemple d'appels API:

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

Code complet: Disponible sur github (lien fourni dans l'original). Une démo Stackblitz (avec une fonctionnalité limitée) est également disponible (lien fourni dans l'original).

FAQS: (Voir Original pour les FAQ détaillées sur Vue.js, récupérer les données des API et JSON, et les meilleures pratiques pour les appels API dans vue.js)

Cette réponse réécrite maintient les informations de base tout en simplifiant la langue et la structure, ce qui la rend plus concise et plus facile à suivre. Les URL d'image sont conservées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!