웹사이트 빌더 VuePress를 사용하는 방법

이번에는 웹사이트 빌더 VuePress 사용법과 웹사이트 빌더 VuePress 사용 시 주의사항은 무엇인지 알려드리겠습니다. 다음은 실제 사례입니다.

VuePress란 무엇입니까

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

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

공식 문서를 참조하여 이 프로젝트에 다음 기능이 있는지 확인하세요.

• 내장 마크다운(기본 기능)

• PWA 지원

• 통합 Google Analytics

• 세트가 있습니다 기본 테마(스타일 및 (공식) 문서) [https://vuepress.vuejs.org] 일관됨)

• 자동으로 생성된 GitHub 링크 및 페이지 편집 링크

빠르게 시작하세요

설치

초기화 프로젝트

npm init -ynpm init -y

安装 vuepress，也可以全局安装

npm install -D vuepress

创建文章文件夹

mkdir docs

配置package.json

{
 "scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}

书写

直接在docs文件夹下新建markdown文件即可编辑书写文章

预览

npm run docs:dev

打开 http://localhost:8080/

构建

npm run docs:build

vuepress를 설치하면 전역적으로 설치할 수도 있습니다

npm install -D vuepress

기사 폴더 만들기

mkdir docs

패키지 .json

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

Writing

문서를 편집하고 작성하려면 docs 폴더에 직접 새 마크다운 파일을 생성하세요.

Preview
npm run docs :dev

http://localhost:8080/
Build

🎜🎜npm run docs:build🎜🎜열기 생성된 파일은 .vuepress/dist 폴더에 있습니다. 기본적으로🎜🎜사용자 정의 구성🎜🎜구성 파일을 작성할 수 있습니다. .vuepress/config.js로 이동🎜🎜상단 탐색 추가🎜

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

🎜사이드바 추가🎜

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

🎜그룹에 사이드바 추가도 지원합니다. 예:🎜rrreee🎜믿습니다 이 기사의 사례를 읽고 방법을 익혔습니다. 더 흥미로운 정보를 보려면 오십시오. PHP 중국어 웹사이트의 다른 관련 기사도 주목하세요! 🎜🎜추천 자료: 🎜🎜🎜vue의 루프 순회 지침은 무엇입니까🎜🎜🎜🎜🎜jQuery를 사용하여 진행률 표시줄 기능을 수동으로 끌어서 제어하는 ​​방법🎜🎜🎜

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