Intro to VuePress 1.x

https://alexjover.com/
https://vuepress-portfolio.netlify.com/
https://lusaxweb.github.io/vuesax/
https://www.amie-chen.com/

What’s VuePress?

Looking at above examples, I believe that even if you are not familiar with VuePress, you can probably guess that it is a tool for building websites. Well, let’s talk first, what is VuePress?

Quick Start

To make VuePress easier to get started, we recently released create-vuepress , which is indeed an npm package, but it doesn’t mean you need to install it manually first.

yarn create vuepress

Theme

By convention, let’s take a look at the existing themes.

vuepress-theme-bulma, by @nakorndev
vuepress-theme-api, by @sqrthree
vuepress-theme-indigo-material, by @zhhlwd
portfolio-vuepress,by @itsnwa
Using a theme
Directory Structure of a VuePress Theme

Plugin

The same convention, let’s take a look at what plugins are there.

  • Built-in blog-styled permalinks
  • Out-of-the-box paging
  • additionalPages: used to add some dynamic pages. The blog plugin mentioned above uses this option to dynamically generate some pages for you.
  • clientDynamicModules: VuePress is based on Vue Router, and you will find that you have not configured the routes. Yes, VuePress internally generates dynamic routing modules by this option and then consumes them on the client.
  • If your plugin also wants to have options, then it can be a function that exports a plain object, where the first parameter of the plugin itself, the second parameter is the current compilation context of the application.
https://github.com/ulivz/intro-to-vuepress-1.x

Permalinks

Here is an intuitive example to express the role of permalinks.

Markdown Slot

Using SFC as source page

Just when we showed the plugin example, we mentioned that our page can point directly to a Vue SFC. Here, the only thing that we need to consider is how to use Front Matter.

Theme Inheritance

Why do we need theme inheritance?

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
ULIVZ

ULIVZ

Open source · Visualization · UE/Design. @vuejs team. @AntFinancial developer.