基于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 相关文章推荐
javascript 屏蔽鼠标键盘的几段代码
Jan 02 Javascript
js 纯数字不重复排列的另类方法
Jul 17 Javascript
JS根据生日算年龄的方法
May 05 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
浅谈Express异步进化史
Sep 09 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
基于Vue中点击组件外关闭组件的实现方法
Mar 06 Javascript
微信小程序常见页面跳转操作简单示例
May 01 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
May 30 Javascript
javascript头像上传代码实例
Sep 28 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
JavaScript或jQuery 获取option value值方法解析
May 12 jQuery
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模板引擎SMARTY
2006/10/09 PHP
php adodb介绍
2009/03/19 PHP
使用php来实现网络服务
2009/09/15 PHP
php数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
yii插入数据库防并发的简单代码
2017/05/27 PHP
PHP sdk文档处理常用代码示例解析
2020/12/09 PHP
用于table内容排序
2006/07/21 Javascript
解读IE和firefox下JScript和HREF的执行顺序
2008/01/12 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
JS画线(实例代码)
2013/11/20 Javascript
javascript简单实现图片预加载
2014/12/03 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
JS不完全国际化&本地化手册 之 理论篇
2016/09/27 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
总结js中的一些兼容性易错的问题
2017/12/18 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
你可能不知道的CORS跨域资源共享
2019/03/13 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
2020/05/06 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[01:27:44]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第一场 1月24日
2021/03/11 DOTA
Python利用IPython提高开发效率
2016/08/10 Python
Python中static相关知识小结
2018/01/02 Python
Python cookbook(数据结构与算法)筛选及提取序列中元素的方法
2018/03/19 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
使用Python机器学习降低静态日志噪声
2018/09/29 Python
opencv实现静态手势识别 opencv实现剪刀石头布游戏
2019/01/22 Python
python实现两张图片的像素融合
2019/02/23 Python
django celery redis使用具体实践
2019/04/08 Python
快速解决vue.js 模板和jinja 模板冲突的问题
2019/07/26 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
Python3.8.2安装包及安装教程图文详解(附安装包)
2020/11/28 Python
css3实现画半圆弧线的示例代码
2017/11/06 HTML / CSS
环境保护标语
2014/06/20 职场文书
JavaScript实现优先级队列
2021/12/06 Javascript