VuePress
# 02.VuePress
从本文开始，动手搭建自己的博客！希望读者能跟着一起动手，这样才能真正掌握。
# 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 建立的，也是因为生态不完善，所以这里不过多介绍。
# 环境准备
我们首先在本地搭建博客，为此我们需要：
- 一台电脑
- VuePress1.x 需要 Node 版本 ≥ 8.6，建议用最新版的 Node。
- Chrome 或 FireFox 浏览器（尽量不要用 IE 浏览器）
# 第一个博客
我们来写第一个博客吧！首先，创建一个文件夹，例如 vuepress-learn（文件夹名最好不要带中文和空格），也可以在 cmd 里使用如下命令
# Windows下
md vuepress-learn
cd vuepress-learn
# Linux 和 mac 下
mkdir vuepress-learn && cd vuepress-learn
2
3
4
5
6
使用自己喜欢的包管理器初始化：
npm init -y
或
yarn init
2
3
安装 VuePress 依赖：
npm install -D vuepress
开始写第一篇博客：
- 我们在当前目录下创建一个 docs 目录（以后博客都放这个文件夹里），
- 进入到该文件夹，创建一个
README.md文档，里面写上内容“Hello VuePress”。 - 如果是在 Linux 或 Mac 下，也可以使用如下命令一步到位：
mkdir docs && echo '# Hello VuePress' > docs/README.md
修改 package.json 文件，添加一些启动命令：
{
"scripts": {
"docs:dev": "vuepress dev docs",
"docs:build": "vuepress build docs"
}
}
2
3
4
5
6
其中，docs:dev 命令用于在本地运行本博客；而 docs:build 用于编译打包博客，用于部署到服务器上。
当前文件夹目录结果如下（忽略 node_modules 文件夹）：
vuepress-learn
├── docs
│ └── README.md
├── package-lock.json
└── package.json
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 管理
git init
添加 .gitignore 文件，忽略 node_modules 文件夹：
node_modules
# 获取源码
为了写本系列的博客，博主特地新建了一个项目用于演示，相关代码已放到 Gitee (opens new window) 和 GitHub (opens new window) 上。
并且，不同功能创建了不同分支，想要获取本篇文章演示的源码只需切换分支即可！
例如，你想运行本篇文章所创建的博客，可以这样做：
- 打开命令行
- 拉取代码：
git clone git@gitee.com:peterjxl/vuepress-learn.git （也可拉取 GitHub 的） - 跳转目录：
cd vuepress-learn - 切换分支：
git switch -c VuePressDemo1HelloWorld origin/VuePressDemo1HelloWorld - 安装依赖：
npm i - 运行博客：
npm run docs:dev
