nuxt 3 베타 : 새로운 것과 시작하는 방법

nuxt 3 : 향상된 기능과 실용적인 구현에 대한 깊은 다이빙

이 기사는 NUXT 3의 주요 개선 사항을 탐구하고 실제 사용을 보여줍니다. 우리는 프로젝트에서 그 기능과 구현을 다룰 것입니다 주요 기능 :

니트로 엔진 : H3에 구축 된 고성능 서버 엔진, API 경로 활성화, 서버리스 배포 (Vercel, Netlify, AWS, Azure) 및 다양한 JavaScript 환경 (노드, 데노, 서버리스 , 노동자).

에서 API 엔드 포인트와 의 미들웨어를 생성하여 간소화 된 개발을 제공합니다. 상당히 작은 번들 (최대 75 배 더 작음)과 최적화 된 콜드 스타트를 기대합니다.

Nuxi Cli :

a 제로 의존성 프로젝트 스캐 폴딩 및 단순화 된 모듈 통합을 제공하는 개조 된 CLI.

• NUXT KIT & NUXT BRIDGE : NUXT KIT는 TypeScript 지원으로 유연한 모듈 개발을 용이하게합니다. NUXT Bridge는 기존 프로젝트에서 NUXT 3 기능을 점진적으로 채택하여 NUXT 2의 원활한 전환을 보장합니다. 여기에는 Nitro, Composition API, The New CLI 및 Progressive 업그레이드 사용이 포함됩니다. vue 3 정렬 : server/api/ vue 3과의 전체 호환성, 구성 API 및 , server/middleware/ 및 와 같은 내장 작곡용 기능을 활용합니다.

• 강화 된 DX :

  웹 팩 5 및 Vite, 기본 ESM 지원, 유틸리티 및 컴포지브의 자동 절개 및 간소화 된 개발 워크 플로우에 대한 개선 된 TypeScript 통합에 대한 지원.

  Nuxt 3 프로젝트 구조 :

• Nuxt 2의 주요 구조적 변경 사항은 다음과 같습니다. 글로벌 구성 요소 및 스타일에 대한 파일; 옵션 디렉토리 (생략되면 가벼운 빌드를 초래); 자동 상영 된 컴포지블에 대한 디렉토리; 및 최적화 된 빌드 출력을위한 디렉토리

  최소 블로그 구축 :
이 섹션에서는 간단한 블로그를 작성하여 Core Nuxt 3 기능을 보여줍니다. 스타일링을 위해 Tailwind CSS를 사용할 것입니다 1. Tailwind CSS 통합 :
• 테일 윈드를 설치하고

  및 를 구성하십시오. CSS 파일을 포함하려면 를 업데이트하십시오 2. 사용자 정의 레이아웃 생성 ( useFetch() useState() 3. 블로그 페이지 만들기 : useMeta()

  • (홈페이지) : pages/index.vue는 를 사용하여 게시물을 가져오고 . useFetch() NuxtLink (개별 게시물 페이지) :

    는
  를 사용하여 게시물 ID를 가져오고 게시물 데이터를 가져와 표시합니다. 를 홈페이지로 포함시킵니다. 사용자 정의 구성 요소 (아래 참조)가 추가됩니다

  • 4. 사용자 정의 구성 요소 만들기 () : pages/post-[id].vue 를 사용하여 오늘의 인용문을 가져 와서 표시합니다. 5. composable 생성 및 사용 ( 자동 임시 기능을 보여주는 간단한 카운터 작용. 별도의 페이지에서 사용됩니다. 결론 : useRoute() NUXT 3은 상당한 성능 향상과 개발자 경험 향상을 제공합니다. 여전히 베타 버전에 있지만 Vue.js 애플리케이션을 구축하기위한 강력한 프레임 워크입니다. 베타 상태는 잠재적 인 불안정성을 의미합니다. NuxtLink quote 자주 묻는 질문 (faqs) :

    제공된 FAQ는 이미 잘 구조화되어 있으며 NUXT 3의 기능 및 사용에 대한 일반적인 질문에 답변합니다. 변경이 필요하지 않습니다.

위 내용은 nuxt 3 베타 : 새로운 것과 시작하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!