VuePress를 사용하여 정적 웹사이트를 생성하는 방법

이번에는 VuePress를 사용하여 정적 웹 사이트를 생성하는 방법과 VuePress를 사용하여 정적 웹 사이트를 생성할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

VuePress란 무엇입니까

VuePress는 Vue를 기반으로 한 경량 정적 웹사이트 generator와 기술 문서 작성에 최적화된 기본 테마의 두 부분으로 구성됩니다. Vue 자체 하위 프로젝트 문서의 요구 사항을 충족하기 위해 만들어졌습니다.

VuePress는 생성된 모든 페이지에 대해 미리 로드된 HTML을 제공합니다. 이는 로딩 속도가 뛰어날 뿐만 아니라 SEO에도 매우 친숙합니다. 페이지가 로드되면 Vue는 모든 정적 콘텐츠를 인수하여 완전한 SPA 애플리케이션으로 전환합니다. 사용자가 탐색을 사용하여 들어갈 때 다른 페이지도 요청 시 로드됩니다.

VuePress 작동 방식

A VuePress 애플리케이션은 실제로 Vue, VueRouter 및 webpack을 기반으로 합니다. 이전에 Vue를 사용한 적이 있다면 VuePress를 사용하여 자신만의 테마를 개발하거나 사용자 정의할 때 사용자 경험은 다음과 같습니다. 거의 동일합니다. Vue DevTools를 사용하여 사용자 정의된 테마를 디버깅할 수도 있습니다!

빌드 프로세스 중에 VuePress는 서버 측 렌더링 버전을 생성하고 각 경로에 액세스하여 관련 HTML을 렌더링합니다. 이 접근 방식은 Nuxt의 nuxt generate 명령과 Gatsby와 같은 다른 프로젝트에서 영감을 받았습니다.

각 마크다운 파일은 HTML로 컴파일된 후 Vue 구성 요소의 템플릿으로 처리됩니다. 이렇게 하면 마크다운 파일에서 Vue를 직접 사용할 수 있으며, 이는 동적 콘텐츠를 포함해야 할 때 매우 유용합니다.

VuePress 기능

• 내장된 마크다운 확장 기능은 기술 문서에 최적화되어 있습니다.

• 마크다운 파일에서 vue를 직접 사용할 수 있습니다

• vue 드라이버 사용자 정의 가능한 페인팅 테마

• PWA 지원 - 프로그레시브 웹 앱

• 통합 Google Analytics

• 기본 VuePress에는 다음이 포함됩니다.

  간단한 헤더
Search

Component

1. 사용자 정의 가능한 탐색 모음 및 사이드바

2. 자동 생성된 GitHub 링크 및 페이지 편집 링크

3. VuePress 마크다운에서 Vue + webpack 개발 환경을 즐기세요. Vue 구성 요소를 사용하고 Vue를 통해 사용자 정의 테마를 개발하세요. VuePress는 생성된 모든 페이지에 대해 미리 로드된 HTML을 제공합니다. 이는 로딩 속도가 뛰어날 뿐만 아니라 SEO에도 매우 친숙합니다. 페이지가 로드되면 Vue는 모든 정적 콘텐츠를 인수하여 완전한 SPA 애플리케이션으로 전환합니다. 사용자가 탐색을 사용하여 들어갈 때 다른 페이지도 요청 시 로드됩니다.

   # install
   npm install -g vuepress
   # create a markdown file
   echo '# Hello VuePress' > README.md
   # start writing
   vuepress dev
   # build to static files
   vuepress build

   이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요! 추천 자료:

4. 컨텍스트 매개변수 값을 얻는 방법(코드 포함)

5. JS를 사용하여 왼쪽 목록과 오른쪽 목록을 서로 이동시키세요

Vue 사용자 정의 동적 사용에 대한 자세한 설명 구성요소

위 내용은 VuePress를 사용하여 정적 웹사이트를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!