![b14c9a40c0bc2421afa7003d55a2de20.png](https://i-blog.csdnimg.cn/blog_migrate/bbaf04ec8a854c1da4e9daafcdace080.jpeg)
背景
最近想把博客搬迁到 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 官方文档:https://zpfz.github.io/vuepress-creator/zh/
8.开源地址
本脚手架开源地址:VuePress-Creator 开源不易,麻烦点个 Star 哦!