ssr的静态网站生成器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

打开 :8080/

构建

npm run docs:build

生成的文件默认会在 .vuepress/dist 文件夹下

自定义配置

可以将配置文件写到 .vuepress/config.js 中

添加顶部导航

module.exports = { themeConfig: { nav: [ { text: 'Home', link: 'https://www.jb51.net/' }, { text: 'Guide', link: '/guide/' }, { text: 'External', link: 'https://google.com' }, ] } }

添加侧边栏

module.exports = { themeConfig: { sidebar: [ 'https://www.jb51.net/', '/page-a', ['/page-b', 'Explicit link text'] ] } }

同时支持分组添加侧边栏 eg:

module.exports = { themeConfig: { sidebar: [ { title: 'Group 1', collapsable: false, children: [ 'https://www.jb51.net/' ] }, { title: 'Group 2', children: [ /* ... */ ] } ] } }

总结

以上所述是小编给大家介绍的基于vue-ssr的静态网站生成器VuePress 初体验 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/pfpyz.html