Getting Started

Prerequisites

* If your project is using webpack 3.x, you may notice some installation issues with npm. In this case, we recommend using Yarn.

Quick Start

The fastest way to get your VuePress project setup is to use our create-vuepress-site generator which will help scaffold the basic VuePress site structure for you.

To use it, open up your terminal in the desired directory and run the following command:

yarn create vuepress-site [optionalDirectoryName]
npx create-vuepress-site [optionalDirectoryName]
// Make sure to add code blocks to your code group

You will then have the opportunity to configure your VuePress site’s metadata such as:

  • Project Name
  • Description
  • Maintainer Email
  • Maintainer Name
  • Repository URL

Once it is complete, you should see your new VuePress site scaffolded in your directory! 🎉

Manual Installation

This section will help you build a basic VuePress documentation site from ground up. If you already have an existing project and would like to keep documentation inside the project, start from Step 3.

  1. Create and change into a new directory

    mkdir vuepress-starter && cd vuepress-starter
    
  2. Initialize with your preferred package manager

    yarn init
    
    npm init
    
    // Make sure to add code blocks to your code group
  3. Install VuePress locally

    yarn add -D vuepress
    
    npm install -D vuepress
    
    // Make sure to add code blocks to your code group
  4. Create your first document

    mkdir docs && echo '# Hello VuePress' > docs/README.md
    
  5. Add some scripts to package.json

    This step is optional but highly recommended, the rest of the documentation will assume those scripts being added.

    {
      "scripts": {
        "docs:dev": "vuepress dev docs",
        "docs:build": "vuepress build docs"
      }
    }
    
  6. Serve the documentation site in the local server

    yarn docs:dev
    
    npm run docs:dev
    
    // Make sure to add code blocks to your code group

    VuePress will start a hot-reloading development server at http://localhost:8080.

By now, you should have a basic but functional VuePress documentation site. Next, learn about VuePress’ recommended directory structure and the basics of configuration in VuePress.

Once you’re familiar with those concepts mentioned above, learn how to enrich your content with static assets, Markdown extensions and vue components.

And when your documentation site starts to take shape, be sure to read about multi-language support and the deployment guide.