lukechinworth / vuepress-test

Example vuepress standalone project

custom	list	sidebarDepth
Title	one two three	2

Home page

This is the home page of your vuepress site. Go nuts with markdown.

'example'.slice();

Vuepress notes

Overview

• Vuepress has two parts:
• static site generator command line tool
• default theme for a static site intended for technical docs

Installation

• Global install for standalone project (e.g. solid book)
• Alternative is local install inside existing project (e.g. docs for a web project)
• 1305 packages. Holy shnikes!

Dev

• vuepress dev serves at http://localhost:8080/
• Hot reload with updates
• Add more dirs and READMEs, e.g. /tv/README.md
• View at /tv/ (trailing slash required)

Config

• Add .vuepress/config.js
• Config title appears in header
• Config description is meta
• Webpage title is vuepress page title joined with config title

Deploy

• vuepress build builds to .vuepress/dist by default
• Simply serve as static site, e.g. on github pages, https://lukechinworth.github.io/vuepress-test/built-site/

Links

• Link is the TV page will be updated with url base automatically
• Links do not refresh. Front end is single page app.
• vuepress dev will serve from base url config http://localhost:8080/vuepress-test/built-site/

Vue

• Md is compiled to html and then passed to vue-loader, so this works: {{ 3 + 4 }}
• You can access site metadata with the global $page: {{ $page }}

Frontmatter

• Frontmatter for the current page is available on the $page object: {{ $page.frontmatter }}
• Set front matter with yaml at top of this markdown file

Vue script and style

• Each markdown file is essentially a vue component, so you can do script and style per page
• So this can be styled with css: blue text
• Check out the console for js from this page

<script> export default { mounted() { console.log('hello from home page') } } </script> <style> .blue { color: blue; } </style>

Vue components

• Add components to .vuepress/components. These are registered as global, async components, like this block quote:

This is the quotation.

Vuepress default theme notes

Navbar

• Nav bar links are specified in .vuepress/config.js at themeConfig.nav.
• Make a dropdown by nesting items

Sidebar

• Specify pages to show in sidebar themeConfig.sidebar to config.
• Displays h2 by default; specify sidebarDepth in frontmatter per page to display h3

Prev/Next links

• Automatically inferred from link order in sidebar config.

Wrap up

• Most configs can be configured in the frontmatter per page
• Check out the default theme config and config reference in the vuepress docs