基于vue-ssr的静态网站生成器VuePress 初体验
什么是VuePress
VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。它是为了满足Vue自己的子项目文档的需求而创建的。
VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好。一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载。
参考官方文档可知该项目有一下特点:
- 内置markdown(基础功能)
- 支持PWA
- 集成了GoogleAnalytics
- 拥有一套默认主题(风格与(官方文档)[https://vuepress.vuejs.org]一致)
- 自动生成的GitHub链接和页面编辑链接
快速上手
安装
初始化项目
npminit-y
安装vuepress,也可以全局安装
npminstall-Dvuepress
创建文章文件夹
mkdirdocs
配置package.json
{ "scripts":{ "docs:dev":"vuepressdevdocs", "docs:build":"vuepressbuilddocs" } }
书写
直接在docs文件夹下新建markdown文件即可编辑书写文章
预览
npmrundocs:dev
打开http://localhost:8080/
构建
npmrundocs: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','Explicitlinktext'] ] } }
同时支持分组添加侧边栏eg:
module.exports={ themeConfig:{ sidebar:[ { title:'Group1', collapsable:false, children:[ '/' ] }, { title:'Group2', children:[/*...*/] } ] } }
总结
以上所述是小编给大家介绍的基于vue-ssr的静态网站生成器VuePress初体验,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持!