利用VuePress-Creator(VuePress脚手架)快速搭建VuePress项目

1,160 阅读3分钟

背景

最近想把博客搬迁到 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 <project> 来创建项目。

3.创建项目

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

vuepress-creator init <project>

其中,请把 <project> 替换为你想要的名称。回车后,会有以下几个选项供你选择:

# 选择你要部署网站的路径,默认:/
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 <project>

查看可用命令

vuepress-creator -h

7.帮助文档

VuePress-Creator 官方文档:zpfz.github.io/vuepress-cr…

8.开源地址

本脚手架开源地址:VuePress-Creator 开源不易,求个Star!