2019.02.18

vuepress 사용해보기(환경준비)
vuepress

vuepress는 현재 버젼0.x1.x alpha 2가지가 있습니다만, 1.x부터는 plugin기능이 강화되어 Blog사이트 등을 구축하기 쉽게 되어 있다고 합니다.
(문서용 사이트만을 만든다면 어느 버젼도 크게 차이가 없을 듯 합니다.)

인스톨

이번은 1.x alpha버젼을 로컬 인스톨 합니다.
작업용 폴더(vuepress_v1_test)를 만든 후

cd vuepress_v1_test
npm init -y
npm install -D vuepress@next

인스톨이 완료되면 폴더dev_docs를 만듭니다.
vuepress를 로컬 인스톨 한 경우는 vuepress커멘드를 사용할 수 없으므로 npm scripts을 이용합니다.
package.json파일의 scripts부분을 다음과 같이 변경합니다.

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

*scripts를 사용 안하는 경우는

npx vuepress dev dev_docs

이것으로 환경 준비가 완료 되었습니다.

markdown 파일 쓰기

dev_docs폴더에 readme.md파일을 만든 후 markdown을 씁니다.

# VuePress테스트

readme.mdindex.html로 출력됩니다.)

브라우져로 표시 확인

npm run dev

브라우져로 http://localhost:8080/을 열면 VuePress테스트가 표시됩니다.
readme.md파일을 편집,저장하면 브라우져가 자동 갱신되면서 실시간으로 편집 내용을 확인할 수 있습니다.

Build

npm run build

build커멘드를 실행하면 .vuepress\dist폴더에 html 파일이 출력됩니다.