정적 사이트 generator, 기술 문서를 편리하게 작성할 수 있다.
기본 테마 제공
pre-render
vue, vue-router, webpack 으로 구현
npm install -D vuepress
├─ docs
│ ├─ README.md
│ └─ .vuepress
│ └─ config.js
└─ package.json
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
module.exports = {
title: 'Hello VuePress',
description: 'Just playing around',
base: '/<리파지토리 이름>/'
}
git checkout --orphan gh-pages
git rm -rf .
git add index.html
git commit -m "First commit"
$git push origin gh-pages
#!/usr/bin/env sh
# abort on errors
set -e
# build
npm run docs:build
# navigate into the build output directory
cd docs/.vuepress/dist
# if you are deploying to a custom domain
# echo 'www.example.com' > CNAME
git init
git add -A
git commit -m 'deploy'
# if you are deploying to https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
# if you are deploying to https://<USERNAME>.github.io/<REPO>
# git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages
git push -f https://github.com/mmmoikim/vuepress-setting.git master:gh-pages
cd -
plugins: [
['@vuepress/last-updated'],//git에 마지막 커밋
['@vuepress/back-to-top', true],//위로 올라가기
'@vuepress/pagination',//다음글, 이전글
['@vuepress/search', {//검색창
searchMaxSuggestions: 10
}],
['@vuepress/active-header-links', {//헤더 바로가기
sidebarLinkSelector: '.sidebar-link',
headerAnchorSelector: '.header-anchor',
headerTopOffset: 120
}]
]
node_module - vuepress - lib - default-theme
을 .vuepress - theme
에 복사해 놓고 스타일 찾으며 수정<Content>
가 페이지 내용 컴포넌트config.js
에 themeConfig로 설정해 놓은 값들은 $site
전역변수에 들어 있음<Badge text="warn" type="warn"/>
<Badge text="tip" vertical="middle"/>
<Badge text="error" type="error"/>