什么是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
rush:js;">
{
"scripts": {
"docs:dev": "vuepress dev docs","docs:build": "vuepress build docs"
}
}
书写
直接在docs文件夹下新建markdown文件即可编辑书写文章
预览
npm run docs:dev
打开 nofollow" href="http://localhost:8080/">http://localhost:8080/
构建
npm run docs:build
自定义配置
可以将配置文件写到 .vuepress/config.js 中
添加顶部导航
rush:js;">
module.exports = {
themeConfig: {
nav: [
{ text: 'Home',link: '/' },{ text: 'Guide',link: '/guide/' },{ text: 'External',link: 'https://google.com' },]
}
}
rush:js;">
module.exports = {
themeConfig: {
sidebar: [
'/','/page-a',['/page-b','Explicit link text']
]
}
}
rush:js;">
module.exports = {
themeConfig: {
sidebar: [
{
title: 'Group 1',collapsable: false,children: [
'/'
]
},{
title: 'Group 2',children: [ /* ... */ ]
}
]
}
}
总结
以上所述是小编给大家介绍的基于vue-ssr的静态网站生成器VuePress 初体验 。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。