VuePress ๐งโโ๏ธ
โจ
โจ
โจ
Hello ๐
Ramona Bรฎscoveanu
๐ฉ๐ผโ๐ป Senior Developer @ SAP
ย @CodesOfRa
ย
๐ง ๐ท๐ฑ
VuePress
- What it is?
- Why use it?
- How does it work?
a minimalistic static site generatorย with a Vue-powered theming systemย and Plugin API, and a default themeย optimized for writing technical documentation.
But what is a static site?
All the things Debbie said ๐๐ผโโ๏ธ
Why use it?
All the things Debbie said ๐๐ผโโ๏ธ
What makes VuePress magic โจ?
Default theme specially built for writing technical documentation
Markdown extensions
Frontmatter
Github-style tables
Emojis๐ฅณ
Syntax Highlighting in Code Blocks
Vue in markdown ๐ฒ
Easy to use
How to start?
yarn create vuepress-site [optionalDirectoryName]
yarn add -D vuepress
or
Demo time ๐ฏโโ๏ธ
Project structure
โโโ docs
โ โโโ README.md
โ โโโ guide
โ โ โโโ README.md
โ โ โโโ getting-started.md
โ โโโ .vuepress
โ โโโ config.js
โ โโโ components
โ โ โโโ MyVueComponent.vue
โ โโโ styles
โ โโโ palette.styl
โ โโโ index.styl
โโโ package.json
How does it work?
Theming
System
Plugin
System
Layout
System
Default
theme
External
themes
Internal
Plugins
External
Plugins
Static Site Generator
But what if you don't like the default theme?
Find a theme you like
ย
// .vuepress/config.js
module.exports = {
theme: 'vuepress-theme-awesome-theme'
};
Create your own 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
Theme inheritanceย
module.exports = {
extend: '@vuepress/theme-default'
}
Overrides
//.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
}
Ejecting
//run
./node_modules/.bin/vuepress eject
Plugins
Plugins
- active-header-links
- back-to-top
- blog
- google-analytics
- last-updated
- medium-zoom
- pagination
- pwa
- register-components
- search
You can also write your own pluginย
VuePress is magic โจ
Want to know more?
Thank you! ย
VuePress
By Ramona Biscoveanu
VuePress
iJS 2020
- 735