VuePress 由两部分组成:一部分是支持用 Vue 开发主题的极简静态网站生成器,另一个部分是为书写技术文档而优化的默认主题。它的诞生初衷是为了支持 Vue 及其子项目的文档需求。
每一个由 VuePress 生成的页面都带有预渲染好的 HTML,也因此具有非常好的加载性能和搜索引擎优化(SEO)。同时,一旦页面被加载,Vue 将接管这些静态内容,并将其转换成一个完整的单页应用(SPA),其他的页面则会只在用户浏览到的时候才按需加载。
npm install -g vuepress
配置需要在文档目录下创建一个.vuepress目录,所有 VuePress 相关的文件都将会被放在这里。 终端创建一个文件夹:mkdir .vuepress
其中有一个最重要的文件.vuepress/config.js
,网站的所有文件的配置都在这个文件里面, 需要创建该文件touch .vuepress/config.js
,该文件要导出一个JavaScript对象:
module.exports = {
title: '个人文档',
description: '练习文档'
}
现在的目录结构:
.
├── .vuepress
│ └── config.js
└── README.md
vuepress里面,一个md文件就是一个页面,如在下面的目录结构中:
目前服务启动的只是本地服务,vuepress还可以把文档生成静态html文件项目,部署到服务器或第三方托管网站上。 生成最终静态文件命令:
vuepress build . 该命令执行完毕后会在.vuepress文件夹下生成dist目录:
该目录里面的文件就是生成的最终静态HTML文件,可把该目录复制到服务器或第三方托管网站部署成自己的文档网站。