基于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 Event学习第十一章 按键的检测
Feb 10 Javascript
JS实现下拉框的动态添加(附效果)
Apr 03 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
JavaScript的各种常见函数定义方法
Sep 16 Javascript
JQuery中attr方法和removeAttr方法用法实例
May 18 Javascript
JS实现DIV容器赋值的方法
Dec 14 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
Jul 10 Javascript
javascript中的闭包概念与用法实践分析
Jul 26 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue输入节流,避免实时请求接口的实例代码
Oct 30 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数组实例总结与说明
2011/08/23 PHP
PHP用身份证号获取星座和生肖的方法
2013/11/07 PHP
PHP采用自定义函数实现遍历目录下所有文件的方法
2014/08/19 PHP
smarty中post用法实例
2014/11/28 PHP
Dwz与thinkphp整合下的数据导出到Excel实例
2014/12/04 PHP
php实现将Session写入数据库
2015/07/26 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP使用XMLWriter读写xml文件操作详解
2018/07/31 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
JS 判断代码全收集
2009/04/28 Javascript
JS input文本框禁用右键和复制粘贴功能的代码
2010/04/15 Javascript
基于jQuery实现的向下滑动二级菜单效果代码
2015/08/31 Javascript
jquery中validate与form插件提交的方式小结
2016/03/26 Javascript
jQuery实现的倒计时效果实例小结
2016/04/16 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
2016/06/02 Javascript
JS中判断字符串中出现次数最多的字符及出现的次数的简单实例
2016/06/03 Javascript
浅谈Javascript中的12种DOM节点类型
2016/08/19 Javascript
详解Angularjs在控制器(controller.js)中使用过滤器($filter)格式化日期/时间实例
2017/02/17 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
微信小程序template模板实例详解
2017/10/27 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
2018/02/21 Javascript
Vue实现简单分页器
2018/12/29 Javascript
如何在JavaScript中正确处理变量
2020/12/25 Javascript
[03:05]《我与DAC》之xiao8:DAC与BG
2018/03/27 DOTA
python实现同时给多个变量赋值的方法
2015/04/30 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
详解Python locals()的陷阱
2019/03/26 Python
flask框架单元测试原理与用法实例分析
2019/07/23 Python
如何用python免费看美剧
2020/08/11 Python
python regex库实例用法总结
2021/01/03 Python
美国著名的户外用品品牌:L.L.Bean
2018/01/05 全球购物
初中英语教学反思
2014/01/25 职场文书
电子商务实训报告总结
2014/11/05 职场文书
导游词之广西漓江
2019/11/02 职场文书
淡雅古典唯美少女娇媚宁静迷人写真
2022/03/21 杂记