基于vue-ssr的静态网站生成器VuePress 初体验


Posted in Javascript onApril 17, 2018

什么是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 初体验 ,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
splice slice区别
Oct 09 Javascript
JavaScript中几个重要的属性(this、constructor、prototype)介绍
May 19 Javascript
Javascript实现真实字符串剩余字数提示的实例代码
Oct 22 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
jQuery内置的AJAX功能和JSON的使用实例
Jul 27 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
Nov 17 Javascript
jquery判断复选框选中状态以及区分attr和prop
Dec 18 Javascript
javascript数字验证的实例代码(推荐)
Aug 20 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
javaScript Array api梳理
Mar 31 Javascript
jQuery实现使用sort方法对json数据排序的方法
Apr 17 #jQuery
jQuery+datatables插件实现ajax加载数据与增删改查功能示例
Apr 17 #jQuery
jQuery实现带右侧索引功能的通讯录示例【附源码下载】
Apr 17 #jQuery
Angular 容器部署的方法
Apr 17 #Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 #Javascript
jQuery简单判断值是否存在于数组中的方法示例
Apr 17 #jQuery
Vue 项目代理设置的优化
Apr 17 #Javascript
You might like
php数组去重复数据示例
2014/02/25 PHP
PHP中copy on write写时复制机制介绍
2014/05/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(八)
2014/06/23 PHP
PHP实现把文本中的URL转换为链接的auolink()函数分享
2014/07/29 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
Jquery ajax不能解析json对象,报Invalid JSON错误的原因和解决方法
2010/03/27 Javascript
基于JQuery模仿苹果桌面的Dock效果(初级版)
2012/10/15 Javascript
Extjs4 Treegrid 使用心得分享(经验篇)
2013/07/01 Javascript
100个不能错过的实用JS自定义函数
2014/03/05 Javascript
JavaScript清空数组元素的两种方法简单比较
2015/07/10 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
2016/04/18 Javascript
浅谈json取值(对象和数组)
2016/06/24 Javascript
gulp-uglify 与gulp.watch()配合使用时报错(重复压缩问题)
2016/08/24 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
2016/12/14 Javascript
详解Angular的8个主要构造块
2017/06/20 Javascript
angular内置provider之$compileProvider详解
2017/09/27 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
JavaScript函数绑定用法实例分析
2017/11/14 Javascript
解决Mac安装thrift因bison报错的问题
2018/05/17 Javascript
jQuery事件委托代码实践详解
2019/06/21 jQuery
vue使用@scroll监听滚动事件时,@scroll无效问题的解决方法详解
2019/10/15 Javascript
国内常用的js类库大全(CDN公共库)
2020/06/24 Javascript
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python tornado上传文件的功能
2020/03/26 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python使用paramiko连接远程服务器执行Shell命令的实现
2021/03/04 Python
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
关于HTML5语义标签的实践(blog页面)
2016/07/12 HTML / CSS
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
你经历的项目中的SCM配置项主要有哪些?什么是配置项?
2013/11/04 面试题
夜不归宿检讨书
2014/02/25 职场文书
领导走群众路线整改措施思想汇报
2014/10/12 职场文书
《你在为谁工作》心得体会(共8篇)
2016/01/20 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
ubuntu端向日葵键盘输入卡顿问题及解决
2022/12/24 Servers