vue.jsとaxiosを使用してサードパーティAPIからデータを取得する

このチュートリアルでは、vue.jsとThe New York Times APIを使用したシンプルなニュースアプリの構築を示しています。 このアプリはトップニュース記事を表示し、カテゴリごとにフィルタリングを許可します。

前提条件：

node.js、yarn（を添えてインストール）、および基本的なvue.jsの知識。 npm i -g yarn重要な手順：

プロジェクトのセットアップ：
1. VITEを使用してVUE 3プロジェクトを作成します：

   。 Project Directory（）に移動し、依存関係をインストールします（）。 yarn create @vitejs/app vue-news-app --template vue cd vue-news-app yarn install

   APIキー：
サインアップページからNew York Times APIキーを取得します。

2. スタイリング：

   Tailwind CSS：
をインストールします。 Tailwindを初期化：
3. 。 Line-Clampプラグインをインストール：

   。構成（詳細についてはオリジナルを参照）を参照して（詳細についてはオリジナルを参照）を作成してください。 yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p yarn add @tailwindcss/line-clamptailwind.config.jsアプリケーションレイアウト：index.css

   、
、および
4. コンポーネントを作成します（コードについてはオリジナルを参照）。これらのコンポーネントを使用するように

   更新します。 Layout.vue Header.vueFooter.vueデータ処理：App.vuecreate

   （オプション、初期テストの場合）。
、
5. 、および

   コンポーネントを作成します（コードについてはオリジナルを参照）。これらのコンポーネントを含めるようにを更新します。 src/posts.json NewsCard.vue NewsList.vueNewsFilter.vueAPI Integration（axios）：App.vueAxios：

   のインストール。 apiキーを
ファイルに保存します（例：
6. ）。 Axiosを使用してNYTIMES APIからデータを取得するように

   更新します（詳細コードについてはオリジナルを参照）。 これには、エラー処理とデータ変換が含まれます。 API呼び出しをトリガーするには、を変更します（変更についてはオリジナルを参照してください）。 yarn add axios .envVITE_NYT_API_KEY=YOUR_API_KEYファイナルタッチ：App.vue（オプション）読み込みインジケーターまたはその他の拡張機能を追加します。NewsFilter.vue

7. の例API呼び出し：

完全なコード：

githubで利用可能（元のリンク）。 Stackblitzデモ（機能が限られている）も利用できます（元のリンク）。

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

faqs：（vue.jsの詳細なFAQについては、APIとJSONからのデータの取得、およびvue.js内のAPI呼び出しのベストプラクティスを参照）

この書き直された応答は、言語と構造を簡素化しながら、コア情報を維持し、より簡潔で容易にします。 画像URLは保存されています

以上がvue.jsとaxiosを使用してサードパーティAPIからデータを取得するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。