这次给大家带来怎样使用网站生成器vuepress，使用网站生成器vuepress的注意事项有哪些，下面就是实战案例，一起来看一下。
什么是vuepress
vuepress由两部分组成：一个基于vue的轻量级静态网站生成器，以及为编写技术文档而优化的默认主题。 它是为了满足vue自己的子项目文档的需求而创建的。
vuepress为每一个由它生成的页面提供预加载的html，不仅加载速度极佳，同时对seo非常友好。一旦页面被加载之后，vue就全面接管所有的静态内容，使其变成一个完全的spa应用，其他的页面也会在用户使用导航进入的时候来按需加载。
参考官方文档可知该项目有一下特点：
内置markdown（基础功能）
支持pwa
集成了google analytics
拥有一套默认主题（风格与(官方文档)[https://vuepress.vuejs.org]一致）
自动生成的github链接和页面编辑链接
快速上手
安装
初始化项目
npm init -y
安装 vuepress，也可以全局安装
npm install -d vuepress
创建文章文件夹
mkdir docs
配置package.json
{ scripts: {  docs:dev: vuepress dev docs,  docs:build: vuepress build docs }}
书写
直接在docs文件夹下新建markdown文件即可编辑书写文章
预览
npm run docs:dev
打开 http://localhost:8080/
构建
npm run docs:build
生成的文件默认会在 .vuepress/dist 文件夹下
自定义配置
可以将配置文件写到 .vuepress/config.js 中
添加顶部导航
module.exports = { themeconfig: {  nav: [   { text: 'home', link: '/' },   { text: 'guide', link: '/guide/' },   { text: 'external', link: 'https://google.com' },  ] }}
添加侧边栏
module.exports = { themeconfig: {  sidebar: [   '/',   '/page-a',   ['/page-b', 'explicit link text']  ] }}
同时支持分组添加侧边栏 eg:
module.exports = { themeconfig: {  sidebar: [   {    title: 'group 1',    collapsable: false,    children: [     '/'    ]   },   {    title: 'group 2',    children: [ /* ... */ ]   }  ] }}
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
vue中有哪些循环遍历指令
jquery如何做出手动拖动控制进度条功能
以上就是怎样使用网站生成器vuepress的详细内容。