โจ
โจ
โจ
Ramona Bรฎscoveanu
๐ฉ๐ผโ๐ป Senior Developer @ SAP
ย @CodesOfRa
ย
๐ง ๐ท๐ฑ
a minimalistic static site generatorย with a Vue-powered theming systemย and Plugin API, and a default themeย optimized for writing technical documentation.
yarn create vuepress-site [optionalDirectoryName]
yarn add -D vuepress
or
โโโ docs
โ โโโ README.md
โ โโโ guide
โ โ โโโ README.md
โ โ โโโ getting-started.md
โ โโโ .vuepress
โ โโโ config.js
โ โโโ components
โ โ โโโ MyVueComponent.vue
โ โโโ styles
โ โโโ palette.styl
โ โโโ index.styl
โโโ package.json
Theming
System
Plugin
System
Layout
System
Default
theme
External
themes
Internal
Plugins
External
Plugins
Static Site Generator
ย
// .vuepress/config.js
module.exports = {
theme: 'vuepress-theme-awesome-theme'
};
theme
โโโ global-components
โ โโโ xxx.vue
โโโ components
โ โโโ xxx.vue
โโโ layouts
โ โโโ Layout.vue (Mandatory)
โ โโโ 404.vue
โโโ styles
โ โโโ index.styl
โ โโโ palette.styl
โโโ templates
โ โโโ dev.html
โ โโโ ssr.html
โโโ index.js
โโโ enhanceApp.js
โโโ package.json
module.exports = {
extend: '@vuepress/theme-default'
}
//.vuepress/styles/palette.styl
$accentColor = #3eaf7c
$textColor = #2c3e50
$borderColor = #eaecef
$codeBgColor = #282c34
$arrowBgColor = #ccc
$badgeTipColor = #42b983
$badgeWarningColor = darken(#ffe564, 35%)
$badgeErrorColor = #DA5961
//.vuepress/styles/index.styl
.content {
font-size 30px
}
//run
./node_modules/.bin/vuepress eject