이번에는 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에는 다음이 포함됩니다.
간단한 헤더# install npm install -g vuepress # create a markdown file echo '# Hello VuePress' > README.md # start writing vuepress dev # build to static files vuepress build
컨텍스트 매개변수 값을 얻는 방법(코드 포함)
Vue 사용자 정의 동적 사용에 대한 자세한 설명 구성요소
위 내용은 VuePress를 사용하여 정적 웹사이트를 생성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
