VuePress

# 02.VuePress

从本文开始，动手搭建自己的博客！希望读者能跟着一起动手，这样才能真正掌握。

‍

VuePress 是由 Vue 作者带领团队开发的，非常火，使用的人很多；Vue 框架官网 (opens new window)也是用了 VuePress 搭建的。即使是在移动端，阅读体验也很好。

根据 VuePress 官网 (opens new window) 的描述，VuePress 是 Vue 驱动的静态网站生成器。简单来说，就是将 Markdown 文件自动转换 HTML，简洁容易使用，性能高，我们只需专注于 Markdown 内容。 ‍

一般来说，学习什么技术，或者使用什么工具，官网文档是最好的……

但我仔细看了下，官网的文档更相当于一个手册，大而全；而我需要的是一个教程，逐步完善功能，而不是一上来就列出所有的功能，令人眼花缭乱，不知道从何下手。为此，我自己整理了不少关于 VuePress 的笔记，看了不少关于 VuePress 入门的博客，才略有所得，写出了本教程。 ‍

本文使用的是 VuePress1.x，虽然 VuePress2.x （也叫 VuePress@next）已经出来一段时间了（2021 年左右），但是 VuePress1.x 的生态很完善，不少主题和插件都仅兼容 1.x，所以本文也是使用 1.x。

题外话：就好比 Java 中，Java8 是用的最广泛的，生态也非常完善，最新版的 Java 较少人使用。 ‍ 读者如果想使用最新版本的 VuePress，也可参考官方的文档，在官网右上角可以选择。博主也简单看了下 v2.x 的文档，在使用方面基本上和 v1.x 差不多，想要迁移也是很方便的。

‍

除此之外还有 vitepress (opens new window)，基于 vite 建立的，也是因为生态不完善，所以这里不过多介绍。

我们首先在本地搭建博客，为此我们需要：

我们来写第一个博客吧！首先，创建一个文件夹，例如 vuepress-learn（文件夹名最好不要带中文和空格），也可以在 cmd 里使用如下命令

# Windows下
md vuepress-learn 
cd vuepress-learn

# Linux 和 mac 下
mkdir vuepress-learn && cd vuepress-learn

1
2
3
4
5
6

‍ 使用自己喜欢的包管理器初始化：

npm init -y
或
yarn init

1
2
3

安装 VuePress 依赖：

npm install -D vuepress

‍ 开始写第一篇博客：

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

修改 package.json 文件，添加一些启动命令：

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

1
2
3
4
5
6

其中，docs:dev 命令用于在本地运行本博客；而 docs:build 用于编译打包博客，用于部署到服务器上。 ‍ 当前文件夹目录结果如下（忽略 node_modules 文件夹）：

vuepress-learn
├── docs
│   └── README.md
├── package-lock.json
└── package.json

1
2
3
4
5

‍ 启动博客：在项目根目录运行如下命令：

npm run docs:dev

‍ 运行后，正常情况下就能编译成功，并且在最后会有提示：

success [22:46:24] Build 185e1f finished in 167 ms! ( http://localhost:8080/ )

‍ 我们在浏览器打开这个网址 http://localhost:8080，可以看到如下内容：

‍ 至此，我们的第一篇博客就完成了！ ‍

为了后续教程需要，我们将本项目用 Git 管理

git init

‍ 添加 .gitignore 文件，忽略 node_modules 文件夹：

node_modules

为了写本系列的博客，博主特地新建了一个项目用于演示，相关代码已放到 Gitee (opens new window) 和 GitHub (opens new window) 上。

并且，不同功能创建了不同分支，想要获取本篇文章演示的源码只需切换分支即可！

例如，你想运行本篇文章所创建的博客，可以这样做：

上次更新: 2025/5/17 12:26:09