vue.js 및 axios와 함께 타사 API의 데이터 가져 오기

이 튜토리얼은 vue.js 및 New York Times API를 사용하여 간단한 뉴스 앱을 구축하는 것을 보여줍니다. 이 앱은 최고의 뉴스 기사를 표시하고 카테고리별로 필터링 할 수 있습니다.

전제 조건 : node.js, yarn (와 함께 설치) 및 기본 vue.js knowledge. 주요 단계 :

프로젝트 설정 : vite를 사용하여 vue 3 프로젝트를 만듭니다 : . Project Directory ()로 이동하여 종속성을 설치합니다 (npm i -g yarn

API 키 : 가입 페이지에서 New York Times API 키를 얻습니다.

스타일링 : Tailwind CSS를 설치하십시오 : . 꼬리 바람을 초기화하십시오 : . Line-Clamp 플러그인을 설치하십시오 :

. (자세한 내용은 원본 참조)를 구성하고
1. (자세한 내용은 원본 참조)를 작성하십시오.

   애플리케이션 레이아웃 : Create , yarn create @vitejs/app vue-news-app --template vue 및 구성 요소 (원본 코드 참조). 이 구성 요소를 사용하려면 를 업데이트하십시오 cd vue-news-app yarn install 데이터 처리 :

   생성
(초기 테스트 용 선택 사항). ,
2. 및 구성 요소를 작성하십시오 (코드의 원본 참조). 이러한 구성 요소를 포함시키기 위해

   를 업데이트하십시오 API 통합 (axios) : axios 설치 : . API 키를

   파일에 저장하십시오 (예 : ). Axios를 사용하여 NYTIMES API의 데이터를 가져 오기 위해
를 업데이트하십시오 (자세한 코드는 원본 참조). 여기에는 오류 처리 및 데이터 변환이 포함됩니다. API 호출을 트리거하려면 를 수정하십시오 (변경 사항은 원본 참조)

3. 최종 터치 : (선택 사항) 하중 표시기 또는 기타 향상 추가 yarn add -D tailwindcss@latest postcss@latest autoprefixer@latest npx tailwindcss init -p 예제 API 호출 : yarn add @tailwindcss/line-clamp tailwind.config.js index.css

   완전한 코드 :
github에서 사용할 수 있습니다 (원본으로 제공되는 링크). StackBlitz 데모 (기능이 제한된)도 사용할 수 있습니다 (원본으로 제공됨). FAQS :
4. (vue.js의 자세한 FAQ, API 및 JSON의 데이터 가져 오기 원본 및 vue.js 내 API 호출에 대한 모범 사례) .이 다시 작성된 응답은 핵심 정보를 유지하면서 언어와 구조를 단순화하면서 더 간결하고 따라갈 수 있습니다. 이미지 URL은 보존됩니다

위 내용은 vue.js 및 axios와 함께 타사 API의 데이터 가져 오기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!