围绕Win10进行
对于其他系统，可百度或者自行找教程

本教程仅仅是作为个人纪录
如若有兴趣可动手按照本教程搭建自己的博客或文档

搭建前，请提前浏览一遍本教程，和重要要点！

VuePress概述

VuePress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器，基于 Markdown 语法生成网页
简单的说它就是一个快速建设文档站点的工具，在简单配置好功能
需要做的事情就剩下写好一个个 Markdown 文档，并且可以将其发布到 GitHub 等静态托管平台

VuePress官网：https://www.vuepress.cn/

前期准备

官网链接：https://git-scm.com/
阿里镜像源（下载速度快）：https://registry.npmmirror.com/binary.html?path=git-for-windows/

安装时，建议不要修改安装路径

官网链接：https://cmder.net/

可选的命令行工具，安装教程在这就跳过了，请自行下载尝试（此工具为非必要工具）

官网链接：https://nodejs.org/zh-cn/

Node.js 版本决定了可搭建VuePress的版本

2.0以上最低要求为Node.js v14+
1.0以上最低要求为Node.js >= v8.6
0.0以上最低要求为Node.js >= v8

下载链接：https://classic.yarnpkg.com/en/docs/install#windows-stable

两种安装方式：
可使用npm命令安装 或 通过下载链接下载安装

1
2
cnpm i yarn -g
# 全局安装

VuePress搭建教程

安装依赖

  • 在你想存放的地方新建一个空文件夹，作为文档的源文件部署地

  • 在此文件夹内右键选择Git Bash Here输入下面的命令 安装依赖

1
2
3
4
5
yarn add -D vuepress

或

npm install -D vuepress

注：
如果你的现有项目依赖了 webpack 3.x
推荐使用 Yarn (opens new window)而不是 npm 来安装 VuePress
因为在这种情形下，npm 会生成错误的依赖树

  • 接下来就会在此目录下自动下载一些依赖文件，等待下载完成

注：往后所有的操作都基于此文件夹
如果出现了什么问题无法解决，就只能删除
所以修改东西前注意做好备份

初始化

  • 在VuePress根目录内右键选择Git Bash Here输入下面的命令
1
2
3
4
5
6
yarn init -y

或

npm init -y
(-y免去确认)

*npm init -y后会生成一个package.json文件

  • 在package.json中添加下面的内容
1
2
3
4
"scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
}

本地调试

  • 在VuePress根目录内右键选择Git Bash Here输入下面的命令
1
2
3
4
5
yarn docs:dev

或

npm run docs:dev
  • 即可通过本地的8080端口访问进行本地预览调试

上传GitHub

1
2
3
4
5
yarn deploy

或

npm deploy

更多教程

更多详细教程可到VuePress查看