Vue를 사용하여 훌륭한 문서 웹 사이트 구축

좋은 문서를 작성하는 것은 귀하가 아닌 다른 사람(6개월에 포함)이 프로젝트를 이해할 수 있도록 준비하는 데 핵심입니다. 쉽고 간단하고 효과적인 방법으로 문서를 생성하는 도구가 필요한 경우 해당 도구는 VuePress입니다.

뷰프레스란?

VuePress는 Vue.js의 제작자인 Evan You의 프로젝트 중 하나입니다. 처음에는 Vue 프로젝트의 문서를 작성하기 위해 만들어졌지만 지금은 모든 사람을 위한 문서를 만드는 데 널리 사용되는 도구가 되었습니다.

이제 소개했으므로 시작하겠습니다!

VuePress 프로젝트를 초기화하는 가장 빠른 방법은 기본 VuePress 사이트 구조를 스캐폴딩하는 데 도움이 되는 'create-vuepress-site 생성기'를 사용하는 것입니다.

# YARN
yarn create vuepress-site [optionalDirectoryName]
yarn add -D vuepress

# NPM
npx create-vuepress-site [optionalDirectoryName]
npm install -D vuepress

이것을 실행하면 프로젝트 디렉토리에 스캐폴딩된 새로운 VuePress 사이트를 볼 수 있습니다. 다음과 같이 표시되어야 합니다.



보시다시피 이제 package.json에 두 개의 새로운 스크립트가 있습니다.

...
  "scripts": {
    "dev": "vuepress dev src",
    "build": "vuepress build src"
  }
...

'dev' 명령을 사용하여 로컬 서버에서 문서 사이트를 제공합시다.

npm run dev 

그렇게 하면 다음 메시지가 표시됩니다.

success [14:20:22] Build 5b6b55 finished in 169 ms! ( http://localhost:8080/ )

이제 Vuepress는 http://localhost:8080/에서 개발 서버를 시작합니다.

확인 해보자



멋진 모양의 기능적인 VuePress 설명서 사이트인 몇 가지 명령만으로 많은 작업을 수행할 수 있습니다. 이제 우리는 그것으로 우리가 원하는 거의 모든 것을 할 수 있습니다.

새 하위 디렉토리를 추가하고 싶다고 가정해 보겠습니다. 먼저 index.md 파일로 이동합니다.

---
home: true
heroImage: https://v1.vuepress.vuejs.org/hero.png
tagline: 
actionText: Quick Start →
actionLink: /guide/
features:
- title: "Feature 1 Title"
  details: Feature 1 Description
- title: "Feature 2 Title"
  details: Feature 2 Description
- title: "Feature 3 Title"
  details: Feature 3 Description
footer: Made by  with ❤️
---

위에서 본 것과 일치합니까? 그럼 '가이드' 폴더로 이동해 보겠습니다. 여기에 도착하면 새 .md 파일을 만들고 추가할 수 있습니다.

Hello World!
작동하는지 확인합니다. 또한 라우팅이 예상대로 작동하도록 새 파일을 config.js에 추가하는 것을 잊지 마십시오. 다음과 같은 것이 있어야 합니다.



이제 개발 서버를 확인하면 새 하위 디렉토리를 볼 수 있습니다.



그러나 Vue는 어떻습니까? 예, 이유 때문에 VuePress라고 합니다. 마크다운 파일 내에서 Vue를 사용할 수 있습니다. 이는 마크다운 파일이 먼저 HTML로 컴파일되고 'vue-loader'에 Vue 구성 요소로 전달되기 때문에 Vue 보간을 사용하고 사이트 데이터에 액세스할 수 있기 때문입니다.

# Hello World!

Hello everyone!

<span v-for="i in 3">{{ i }}</span>

꽤 쉽죠? VuePress의 디렉토리 구조와 구성에 익숙해지면 프로젝트를 위한 정말 멋진 문서를 만들 수 있습니다. 당신이 그것을 좋아하고 이 멋진 도구를 활용할 수 있기를 바랍니다!