DEV Community

Cover image for Getting Start Your VuePress with CodeSandBox in 30 min
JinTeng
JinTeng

Posted on

Getting Start Your VuePress with CodeSandBox in 30 min

VuePress+CodeSanBox template

Why VuePress?

  • Minimal setup with markdown-centered project structure helps you focus on writing.
  • VuePress generates pre-rendered static HTML for each page, and runs as an SPA once a page is loaded.

How to Quick Start?

  • VuePress starter template for CodeSandbox helps you create the project with one single click.
  • Continuous deploy your works by connecting a Git repository to a Netlify site and keeping the two in sync.

Basic VuePress Tutorial

VuePress+CodeSanBox demo

Editing your Homepage

Your Homepage(Index) is a README.md. There is a default VuePress template.

---
home: true
heroImage: /hero.png
actionText: CSS →
actionLink: /css/
features:
  - title: "Code Snippet"
    details: JavaScript, CSS
  - title: "Document"
    details: Note
  - title: "Link"
    details: Note
footer: Copyright © Jing, Li
---
Enter fullscreen mode Exit fullscreen mode

Config the Router to Content Pages

Routers are mapped to your file structure.

.
├── .vuepress
├── README.md // <- index
├── CSS // <- path : /css
│   └── README.md // <- index of /css
├── JS
│   └── README.md
├── NOTE
│   └── README.md
└── package.json
│
└── ...
Enter fullscreen mode Exit fullscreen mode

Child route

Those .md files in the first hierarchy directory will be built as .html files and can be accessed.

eg.

├── CSS // <- path : /css
│   ├── README.md // <- index of /css
│   └── page-one.md // <- /css/page-one.html
Enter fullscreen mode Exit fullscreen mode

Sidebar of Content (Auto Sidebar for Single Pages)

The sidebar of content is auto generated by markdown titles.

There are two methods to set your content sidebar of all pages.

Method 1 - set in config.js

module.exports = {
  title: "Pika Code",
  description: "Front End Notebook",
  themeConfig: {
    ...
    sidebar: 'auto'
  }
};

Enter fullscreen mode Exit fullscreen mode

Method 2 - set in specific page with yaml format

--------
sidebar: auto
--------
Enter fullscreen mode Exit fullscreen mode

Navigation

You can set your navigation items in .vuepress/config.js.

module.exports = {
  title: "Pika Code",
  description: "Front End Notebook",
  themeConfig: {
    nav: [
      { text: "CSS", link: "/css/" },
      { text: "JS", link: "/js/" },
      { text: "NOTE", link: "/note/" }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

Child Nav

HTML Head

  • favicon Add a favicon.ico in .vuepress/public.

Quick Start

1.install "VuePress + CodeSanBox" template

2.Update Directory Structures

.
├── .vuepress
│   ├── components
│   ├── theme
│   │   └── Layout.vue
│   ├── public // <- put assets
│   ├── styles
│   ├── templates
│   ├── config.js // <- config your title, nav ...
│   └── enhanceApp.js
│
├── README.md // <- index
├── guide // <- path : /guide
│   ├── page-one.md // <- /guide/page-one.html
│   └── README.md // <- index of /guide
└── package.json
│
└── ...
Enter fullscreen mode Exit fullscreen mode

3.Update Config

module.exports = {
  title: "Pika Code",
  description: "Front End Notebook",
  themeConfig: {
    nav: [
      { text: "CSS", link: "/css/" },
      { text: "JS", link: "/js/" },
      { text: "NOTE", link: "/note/" }
    ]
  }
};
Enter fullscreen mode Exit fullscreen mode

Discussion (0)