VuePress快速上手

一、配置环境

• 安装node.js

• 安装 yarn

  npm i -g yarn # 或者：sudo npm i -g yarn
  

• 安装 vuepress

  yarn init
  yarn global add vuepress # 或者：npm install -g vuepress
  

• 新建一个 markdown 文件

  mkdir docs && echo '# Hello VuePress' > docs/README.md
  

• 运行：在 package.json 中添加一些 scripts

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

  

  yarn docs:dev # 或者：npm run docs:dev
  

• 运行效果
  

二、主题配置

• 在 markdown 文件中添加

  ---
  home: true
  heroImage: /logo.png
  heroText: Hero 标题
  tagline: Hero 副标题
  actionText: 快速上手 →
  actionLink: /zh/guide/
  features:
  - title: 简洁至上
    details: 以 Markdown 为中心的项目结构，以最少的配置帮助你专注于写作。
  - title: Vue驱动
    details: 享受 Vue + webpack 的开发体验，在 Markdown 中使用 Vue 组件，同时可以使用 Vue 来开发自定义主题。
  - title: 高性能
    details: VuePress 为每个页面预渲染生成静态的 HTML，同时在页面被加载的时候，将作为 SPA 运行。
  footer: MIT Licensed | Copyright © 2018-present Evan You
  ---
  

  

• 运行效果

  

三、导航栏

1. 导航栏 Logo

• 新建文件夹 .vuepress，再在文件夹下新建文件 config.js，在配置文件中添加导航栏Logo。

  module.exports = {
      themeConfig: {
          logo: '/assets/img/logo.png',
      }
  }
  

• 新建文件夹 .vuepress\public\assets\img，将导航栏Logo复制进去。

  

2. 导航栏链接

• 在配置文件 config.js 中添加导航栏链接。

  

• 运行效果：

  

四、侧边栏

• 自动生成侧边栏
  
• 运行效果
  

五、SEO

• 在 config.js 中添加配置项：title、description、head。

  

• 运行效果：