vuepress는 현재 버젼0.x과 1.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.md은 index.html로 출력됩니다.）
브라우져로 표시 확인
npm run dev
브라우져로 http://localhost:8080/을 열면 VuePress테스트가 표시됩니다.
readme.md파일을 편집,저장하면 브라우져가 자동 갱신되면서 실시간으로 편집 내용을 확인할 수 있습니다.
Build
npm run build
build커멘드를 실행하면 .vuepress\dist폴더에 html 파일이 출력됩니다.