Sveltekit : svelte 로 웹 앱 구축에 대한 초보자 친화적 인 가이드
Svelte를 기반으로 구축 된 공식적으로 지원되는 프레임 워크 인 Sveltekit은 라우팅, 레이아웃 및 서버 측 렌더링과 같은 필수 기능을 통합하여 프론트 엔드 개발을 단순화합니다. 이 튜토리얼은 상상의 사용자 프로파일을 보여주는 기본 웹 앱을 구축하여 Sveltekit의 주요 기능을 강조합니다.
주요 개념 : 
Sveltekit의 힘 : Sveltekit은 본격적인 웹 응용 프로그램을 구축하는 데 중요한 기능을 추가하여 성능 및 사용자 경험을 향상시켜 Svelte를 향상시킵니다.
성능 부스트 : 빌드 타임 컴파일, 코드 분할, 사전 렌더링 및 프리 페치 애플리케이션 속도 및 SEO.
단순성 및 유연성 : Sveltekit는 유연한 배포 옵션과 효율적인 동적 컨텐츠 관리를 제공하는 웹 앱 생성을 간소화합니다.
왜 svelte를 선택합니까?
Svelte의 인기 상승은 재사용 가능한 자체 포함 된 구성 요소에서 비롯된 반응과 유사합니다. 그러나 - 빌드-타임 컴파일은 그것을 구별합니다. Svelte는 runtime
해석이있는 프레임 워크와 달리 빌드 프로세스 중에 코드를 컴파일하여 더 작고 빠른 웹 앱을 만듭니다. 다른 프레임 워크는 더 많은 코드를 클라이언트에게 배송하여로드 시간이 증가합니다. Svelte의 단순성은 초보자에게 친숙합니다. 기본 HTML, CSS 및 JavaScript 지식은 구성 요소 구축을 시작하기에 충분합니다.
- sveltekit의 필요성 :
Svelte는 훌륭한 개발 경험을 제공하는 반면 Sveltekit은 향상된 사용자 경험 및 배포 유연성을위한 주요 영역을 다룹니다. 코드를 단일 자바 스크립트 파일로 번들링하는 전통적인 접근 방식을 향상시킵니다.
Sveltekit은 다음을 통해 개선합니다
- 강화 초기 페이지로드 : 빈 HTML 파일을 제공하는 대신 Sveltekit은 사전 렌더링 및 서버 측 렌더링을 통해 더 빠른로드 및 SEO 혜택을 위해 사전 렌더링 된 HTML을 제공합니다. 클라이언트 측 라우팅은 단일 페이지 응용 프로그램 느낌을 유지합니다
코드 분할 : 앱은 경로 당 작은 자바 스크립트 청크로 나뉘어 필요한 코드 만로드하여 성능을 향상시킵니다. 프리 페치는 이것을 더욱 최적화합니다.
유연한 배포 : 어댑터는 다양한 플랫폼에서 배포를 단순화합니다 (정적 파일 호스팅, 서버리스 함수, 노드 서버).
사용 편의성 : Sveltekit은 복잡한 빌드 프로세스를 처리하고 개발을 단순화합니다.
시작하기 :
전제 조건 : - node.js (NVM을 통해 설치). 코드는 Github에서 사용할 수 있습니다
프로젝트 설정 :
"Sveltekit 데모 앱", TypeScript의 경우 "No"및 추가 옵션의 경우 "No"를 선택하십시오.
개발 환경 :
-
정리 : 및 및 를 수정하십시오
레이아웃 및 클라이언트 측 라우팅 :
npm init svelte@latest svelteKit-example-app
로그인 후 복사
구성 요소는 여러 페이지에서 코드를 적용합니다. 앱 전체 메타 태그와 네비게이션 바를 포함하도록 수정하십시오 (원본에 표시된대로). 구성 요소를 업데이트하십시오
<🎜 🎜> <<> 정적 페이지 및 사전 렌더링 : <🎜 🎜>
정적 컨텐츠의 경우 <🎜 🎜> 파일에 <🎜 🎜>를 추가하여 Prerender 개별 페이지를 Prerender (예 : <🎜 🎜>). 노드 서버를 빌드하고 실행하려면 로 전환하십시오. -
<<> 엔드 포인트 : <🎜 🎜>
<🎜 🎜> 라이브러리를 사용하여 API 엔드 포인트를 만듭니다. 이것은 백엔드 API를 시뮬레이션합니다
cd svelteKit-example-app
npm install
npm run dev -- --open
로그인 후 복사
함수를 사용하여 엔드 포인트에서 데이터를 가져와 구성 요소로 전달하십시오. in src/lib는 페치 된 데이터를 수신합니다
동적 매개 변수 : src/routes src/routes/styles.css
사용자 세부 정보를 표시하기 위해 동적 경로 ()를 만듭니다. 함수의 속성에서 매개 변수에 액세스하십시오.
프리 페치 : src/routes/ page.svelte
에 를 에 추가하여 호버에 대한 데이터를 사전 페치하여 사용자 경험을 향상시킵니다.
>
결론 :
Sveltekit은 고성능 SEO 친화적 인 웹 앱을 구축하는 것을 단순화합니다. 유연성을 통해 서버 측 렌더링과 같은 기능을 사용자 정의 할 수 있습니다. Svelte와 Sveltekit의 조합은 강력하고 효율적인 개발 경험을 제공합니다. 사전 구성된 프로젝트 설정을 위해 Sveltekit BoilerPlates를 탐색하십시오
위 내용은 Sveltekit에 대한 초보자 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
