VuePress 소개

너는 최근에 VuePress을 들은 적이 있을 것이다. 그것은 거의 하룻밤 사이에 나타났고, 그 후 얼마 지나지 않아 Product of the Day on ProductHunt이 되었다.Vue Press의 특별한 점은 무엇인가요?Vue Press란 무엇입니까?그것은 사실상 정적 사이트 생성기이다.특히 Vue.js에 전기를 공급하는 정적 사이트 생성기는 문서 사이트를 구축하는 데 목적을 둔다.왜 이렇게 특별해?창조자 EvanYou는 매우 간단하지만 유연한 소프트웨어를 구축하는 비결을 가지고 있다.어쨌든 그는 성공했다.js.VuePress도 예외가 아닙니다.두 명령을 실행하면 사전 렌더링, SEO 친화적 SPA 및 전체 Vue 구성이 0이 됩니다.js 지원.몇 줄만 설정하면 필요에 따라 개성화된 설정을 할 수 있습니다.

빠른 시작

1단계: VuePress를 설치합니다.

$ npm install -g vuepress

두 번째 단계: 뭘 좀 써요.

폴더에 README.md을 만들고 태그를 작성합니다(Vue.js 표현식과 혼합하여 사용합니다!)안에 있습니다.
자술하다.회사 명

## Hello VuePress!

_How are you doing?_
> **I'm doing fine, thanks!**

_Great, I was wondering what `49 + 32` is?_
> **{{49 + 32}}**

_Could you repeat that a few times?_

> **Sigh...**
<p v-for="i of 3">{{49 + 32}}</p>

이 폴더에서 $ vuepress dev을 실행하고 생성된 URL에 액세스합니다.(핫 모듈이 다시 로드됩니다!)
결과는 다음과 같습니다.

보시다시피 Vue의 템플릿 시스템에 익숙하면 VuePress를 사용하면 편안함을 느낄 수 있습니다.또한 페이지의 제목이 링크할 수 있는 닻이 되는 것을 볼 수 있어 편리합니다.

3단계: 구축합니다.

게시 사이트를 준비할 때 $ vuepress build을 실행하십시오.최종 출력은 .vuepress/dist으로 웹팩을 통해 잘 구축되고 축소될 것이다.
하지만 너는 먼저 조정을 좀 하고 싶을 수도 있지 않니?종이 한 장이 좀 지루하다.

발표 메타데이터

우선, 프로젝트 디렉터리에 몇 개의 가격 인하 파일을 계속 만듭니다.
1페이지.회사 명

# This is Page 1

Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

2페이지.회사 명

# This is Page 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat.

만약 당신이 지금 브라우저를 보고 있다면, 신기한 다음 문장/이전 문장 링크가 나타나는 것을 발견할 수 있을 것이다.이 링크의 텍스트는 이 게시물의 첫 번째 제목과 같습니다.이 예에서 이것은 This is Page 1/2을 의미한다.이것은 우리가 원하는 것이 아니다.
계속해서 두 페이지 태그 파일의 맨 위에 YAML Front matter 블록을 추가합니다.
1페이지.회사 명

---
title: Page 1
# We can even add meta tags to the page! This sets the keywords meta tag.
# <meta name="keywords" content="my SEO keywords"/>
meta:
  - name: keywords
  - content: my SEO keywords
---

# This is Page 1

...

2페이지.회사 명

---
title: Page 2
---

# This is Page 2

...

이렇게 하면 현재 링크는 Page 1과 Page 2이 아니라 This is Page ...이어야 합니다.
이것은 full list of front-matter metadata입니다.

사이드바 추가

전진/다음 링크 내비게이션을 사용하는 것은 좀 불편하지 않습니까?그리고 페이지가 좀 어지러운 것 같습니다.만약 사이드바나 다른 물건이 이 두 문제를 해결할 수 있다면, 그것은 좋지 않습니까?
VuePress의 기본 테마는 강력한 사이드바를 지원하지만 사용하려면 간단한 프로필을 만들어야 합니다.
계속해서 프로젝트 디렉터리에 .vuepress/config.js을 만들고 사이드바를 사용합니다.
.vuepress/설정.회사 명

module.exports = {
  themeConfig: {
    sidebar: [
      '/',
      '/Page 1',
      '/Page 2'
    ]
  }
}

이것이 바로 기본 개요란에 필요한 모든 내용이지만 다른 각종 configuration options도 있다.

탐색 모음 활성화

그래서 당신은 페이지와 사이드바를 가지고 있지만, 사이트는 여전히 약간 무미건조함을 느낀다.왜 내비게이션 표시줄과 검색 기능을 추가하여 미화하지 않습니까?
.vuepress/설정.회사 명

module.exports = {
  title: 'My VuePress Site',

  themeConfig: {
    sidebar: [
      ...
    ],

  }
}

네비게이션 표시줄과 검색 필드를 만드는 데 필요한 모든 작업은 사이트에 제목을 추가하는 것입니다!이야기하는 것이 편리하다!그리고 검색 기능은 기성!
(물론 configure the navbar에 대해 다른 조작을 수행할 수 있습니다.)

Vue 구성 요소 사용

우리 일을 한 단계 향상시키자.VuePress의 진정한 강점은 페이지에서 Vue 구성 요소를 사용할 수 있다는 것입니다.
Vue 구성 요소는 SSR을 지원해야 하므로 mounted() 갈고리나 이벤트 모니터에서 브라우저만 사용하는 API로 DOM이나 인터페이스를 수정해서는 안 됩니다.
숫자를 늘리고 줄일 수 있는 Vue 구성 요소를 만듭니다.(여러분, 여기는 정말 중요합니다.)VuePress는 .vuepress/components에서 생성된 Vue 구성 요소를 자동으로 감지하므로 .vuepress/components/NumberModifier.vue을 계속 생성합니다.
.vuepress/components/NumberModifier.vue

<template>
  <div class="number-modifier">
    <button @click="increment()">+</button>
    <strong> {{value}} </strong>
    <button @click="decrement()">-</button>
  </div>
</template>

<script>
export default {
  props: ['start'],

  // We have to copy the value because we can't use v-model with
  // nothing to bind to.
  // (VuePress doesn't have support for reactive page variables at the moment.)
  data() {
    return {
      value: this.start
    }
  },

  methods: {
    increment() { this.value++ },
    decrement() { this.value-- }
  }
}
</script>

그렇듯이, 우리는 어떤 댓글에서도 그것을 사용할 수 있다.예를 들어, Page-1.md1페이지.회사 명

...
# This is Page 1

**Our Component:**
<NumberModifier :start="5"></NumberModifier>

Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

같은 방법은 모든 구성 요소에 적용된다.이것은 문서에서 작성된 구성 요소를 보여주는 좋은 방법이 되고, 심지어는 더 높은 사이트를 구축하는 것까지!모든 것은 너에게 달려 있다.

사용자 정의 테마

모든 사람이 자신의 정적 사이트가 같은 도구로 구축된 다른 사이트와 같기를 바라는 것은 아니기 때문에 최종적으로 맞춤형 서비스를 시작하기를 원할 가능성이 높다.

기본 수정

기본 테마는 Stylus을 CSS 프로세서로 사용합니다.한두 가지 색상만 변경하려면 .vuepress/override.styl을 추가하고 일부 값을 수정하면 됩니다.필요한 경우 CSS 덮어쓰기를 추가할 수도 있습니다.
기본 테마는 기본적으로 충분합니다. 강조 문자의 색깔만 바꾸고 싶을 수도 있습니다.
.vuepress/override.벤젠

// Color configuration
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34

// Layout configuration
$navbarHeight = 3.6rem
$sidebarWidth = 20rem
$contentWidth = 740px

새 테마 만들기

VuePress에서 주제는 Vue 구성 요소와 관련 자산의 집합일 뿐입니다.자신의 테마를 사용하기 시작하면, 가장 간단한 방법은 $ vuepress eject을 사용하여 기본 테마를 팝업하는 것입니다.기본 테마 파일을 .vuepress/theme으로 복사하는 것입니다.
기본 테마를 보면 이해하기 쉽다는 것을 알 수 있다.25개 미만의 파일은 줄당 평균 70줄입니다.기본적으로 견본이 없다.
사용자 정의 테마를 바로 시작할 수 있습니다.구성 요소는 사이트의 다른 부분처럼 핫로드됩니다!사용자 정의 테마에 대한 자세한 내용은 docs을 보십시오.

결론

Vue Press는 이제 막 시작했는데, 나는 이미 그것이 매우 좋아 보인다고 말할 수 있다.당장 그걸로 아무것도 짓지 않으려 해도 offical docs에 주의해야 한다.일은 더 좋아질 뿐이다.