富贵资源网 Design By www.hznty.com
什么是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-ssr的静态网站生成器VuePress 初体验 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...