How to use the website builder VuePress

This time I will show you how to use the website builder VuePress, and what are the precautions for using the website builder VuePress. The following is a practical case, let's take a look.

What is VuePress

VuePress consists of two parts: a lightweight static website generator based on Vue, and a tool for writing technical documentation And optimized default theme. It was created to meet the needs of Vue's own subproject documentation.

VuePress provides preloaded HTML for every page generated by it, which not only has excellent loading speed, but is also very friendly to SEO. Once the page is loaded, Vue takes over all static content, turning it into a complete SPA application. Other pages will also be loaded on demand when the user uses navigation to enter.

Referring to the official documentation, we can see that this project has the following features:

• Built-in markdown (basic function)

• Supports PWA

• Integrated Google Analytics

• Have a set of default themes (the style is consistent with (official documentation)[https://vuepress.vuejs.org] )

• Automatically generated GitHub link and page editing link

Get started quickly

Installation

Initialize the project

npm init -y

Install vuepress, you can also install it globally

npm install -D vuepress

Create article folder

mkdir docs

Configure package.json

{
 "scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}

WRITING

Create a new markdown file directly in the docs folder to edit and write articles

Preview

npm run docs:dev

Open http://localhost:8080/

Build

##npm run docs:build

The generated file will be in the .vuepress/dist folder by default

Custom configuration

You can write the configuration file to .vuepress/config.js

Add Top navigation

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

Add sidebar

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

Also supports grouping to add sidebar eg:

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

I believe you have mastered the method after reading the case in this article, more exciting Please pay attention to other related articles on php Chinese website!

Recommended reading:

What are the loop traversal instructions in vue

How to make manual drag control of the progress bar with jQuery Function

The above is the detailed content of How to use the website builder VuePress. For more information, please follow other related articles on the PHP Chinese website!