Vuepress

Posted on  by admin

Yarn Classic(opens new window) (Optional)*.

* If your project is using webpack 3.x, you may notice some installation issues with npm. In this case, we recommend using Yarn. The fastest way to get your VuePress project set up is to use our create-vuepress-site generator(opens new window), 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:.

Post Metadata

The command will interactively ask for details to configure your VuePress site’s metadata such as:. Maintainer Email. Maintainer Name. Once this done, a scaffolded documentation site will be created in the docs directory (or custom directory name, if passed) under the current directory.

To see it in action, navigate into newly scaffolded directory, install the dependencies and start the local server:. If you prefer, you can build a basic VuePress documentation site from ground up instead of using the generator mentioned above. Note: If you already have an existing project and would like to keep documentation inside the project, start from Step 3.

Create and change into a new directory. Initialize with your preferred package manager. Install VuePress locally. Create your first document. Add helper scripts(opens new window) to package.json. This step is optional but highly recommended, as the rest of the documentation will assume those scripts being present.

Serve the documentation site in the local server. VuePress will start a hot-reloading development server at http://localhost:8080(opens new window).

Enabling the Navbar

By now, you should have a basic but functional VuePress documentation site.

Custom Themes

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. 📝 Minimalistic Vue-powered static site generator. Use the package manager yarn to install VuePress as a dev dependency.

Contributing

  • The docs are available at https://vuepress.vuejs.org.
  • Want to contribute?
  • Check our issues for beginners!

Installation

  • If you don't have a local checkout, you can also open VuePress in Gitpod, a free online IDE for GitHub.
  • If you intend to make "substantial" changes to VuePress or its documentation, please checkout VuePress RFCs. If you have a VuePress-related project/component/tool, add it with a pull request to this curated list!
  • You may have heard of VuePress recently, it appeared almost overnight and shortly thereafter became Product of the Day on ProductHunt.
  • What is it about VuePress that makes it so special?

# Quick Start

What is VuePress? Well, it’s effectively a static site generator. Particularly, a Vue.js-powered static site generator aimed toward building documentation websites.

Why’s that so special? The creator, Evan You, has a knack for building incredibly simple but flexible software. After all, he made Vue.js. VuePress is no different.

# Prerequisites

After running two commands, you’ll have a zero-configuration prerendered, SEO-friendly SPA with full Vue.js support. A few lines of config and it will be personalized to fit your needs.

Create README.md in a folder and write some markdown (mixed with Vue.js expressions!) in it. Run $ vuepress dev in that folder and visit the resulting URL. (It has hot module reloading!). The result should look something like this:. As you can see, if you’re familiar with Vue’s templating system at all, you’ll feel right at home with VuePress.