利用VuePress-Creator（VuePress脚手架）快速搭建VuePress项目

背景

最近想把博客搬迁到 Github 上，所以找到了 VuePress 静态站点生成工具。现在已经升级到 1.x 版本了，目前用着还不错。但就是每次创建 VuePress 项目略显麻烦，无奈之下抽空写了 VuePress-Creator 脚手架（开源！开源！开源！），方便了快速创建 VuePress 项目。但由于时间关系，脚手架没有添加 多语言 选项，后期会抽空完善这款脚手架的~
下面我简单介绍如何使用这款脚手架来快速创建 VuePress 项目。

步骤

1.安装全局 VuePress-Creator

打开你的命令行窗口，然后输入以下代码：

yarn global add vuepress-creator

如果你只使用 npm：

npm install -g vuepress-creator

注意
部分用户使用 yarn 安装完后执行命令时出现 【“vuepress-creator”不是内部或外部命令，也不是可运行的程序或批处理文件。】，对应其解决办法请看《yarn 安装全局包后找不到命令的问题》。

2.初始化模板

第一次使用脚手架时请先初始化模板：

vuepress-creator upgrade -t

温馨提示
第一次初始化完毕后，后续可直接使用命令 vuepress-creator init 来创建项目。

3.创建项目

初始化模板完毕后，在命令行窗口输入以下命令开始创建项目：

vuepress-creator init 

其中，请把 替换为你想要的名称。回车后，会有以下几个选项供你选择：

# 选择你要部署网站的路径，默认：/
1.Where do you want to deploy your website: 

# 是否开启行号，默认：关闭
2.Use the lineNumbers?

# 是否开启可编辑链接，默认：关闭
# 若开启，则需要输入 repo，一般为你的 Github 主页。
3.Use the editLinks?

# 是否使用 Less，默认：开启
4.Use Less?

# 你的电脑是否有全局安装 VuePress，默认：否
5.Do you have install global VuePress in your PC?

# 选一个包管理器，默认：yarn
6.Pick a package manager?

温馨提示
针对第 5 个问题：为了尽可能减少 node_modules 文件夹的体积，对于已经全局安装 VuePress 的用户请选择 yes，否则请选 no。
关于插件 @vuepress/back-to-top 配置正常但无法正常显示的解决办法：请在项目下安装 VuePress（不管是否全局安装 VuePress，目前暂定为官方的BUG）。

选择完毕后，脚手架将自动进行一系列的操作，直到配置完毕。再此期间，请你耐心等待。

4.开发运行

打开已经配置完毕的项目，在命令行窗口输入以下命令：

yarn dev # 或者：npm run dev

5.生产运行

要生成静态的 HTML 文件，运行：

yarn build # 或者：npm run build

生成的静态文件会存放在 .vuepress/dist，你也可以自定义生成路径，但实际上一般不需要修改它。
这里推荐使用 VS Code 编辑器，对执行 package.json 文件内的脚本命令很友好，同时也支持编写 .md 文档。

6.内置命令

初始化/升级模板

vuepress-creator upgrade -t

温馨提示
第一次使用脚手架绝对要记得初始化模板哦！

注意
当你的脚手架版本太旧时，更新模板可能引起兼容性问题，所以进行此操作前请到官方确认最新版本的脚手架，然后升级到可兼容的脚手架版本。

创建项目

vuepress-creator init 

查看可用命令

vuepress-creator -h

7.帮助文档

VuePress-Creator 官方文档：https://zpfz.github.io/vuepress-creator/zh/

8.开源地址

本脚手架开源地址：VuePress-Creator
开源不易，求个Star！