介绍

Vuepress 是一个基于 Vue.js 的静态网站生成器，它是一个快速、简洁且高效的静态网站生成器，专注于内容的创作。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。

安装

npm install -g vuepress

快速开始

# 创建一个新的 Vuepress 项目
mkdir my-blog
cd my-blog


# 初始化项目
npm init -y

# 安装 Vuepress
npm install -D vuepress

# 创建一个新的文章
mkdir docs
cd docs
echo '# Hello Vuepress' > README.md


# 启动开发服务器
npx vuepress dev

# 构建静态文件
npx vuepress build

目录结构

.
├── docs
│   ├── README.md
│   ├── .vuepress
│   │   ├── config.js
│   │   ├── public
│   │   └── styles
│   └── .md
├── package.json
└── package-lock.json

配置

// .vuepress/config.js
module.exports = {
  title: 'My Blog',
  description: 'My Personal Blog',
  base: '/',
  head: [
    ['link', { rel: 'icon', href: '/logo.png' }]
  ],
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Archives', link: '/archives/' },
      { text: 'About', link: '/about/' }
    ],
    sidebar: [
      '/',
      '/archives/',
      '/about/'
    ]
  }
}

主题

Vuepress 提供了丰富的主题，包括默认主题、简约主题、星空主题、Algolia 搜索主题等。

# 安装默认主题
npm install -D @vuepress/theme-default

# 安装简约主题
npm install -D @vuepress/theme-simple


# 安装星空主题
npm install -D @vuepress/theme-star

# 安装 Algolia 搜索主题
npm install -D @vuepress/theme-search-algolia