基于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 相关文章推荐
jQuery $.each的用法说明
Mar 22 Javascript
javascript-表格排序(降序/反序)实现介绍(附图)
May 30 Javascript
JavaScript性能优化之小知识总结
Nov 20 Javascript
js添加事件的通用方法推荐
May 15 Javascript
BootStrap表单验证实例代码
Jan 13 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
详解Angular的8个主要构造块
Jun 20 Javascript
vue实现消息的无缝滚动效果的示例代码
Dec 05 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
浅谈Vue 函数式组件的使用技巧
Jun 16 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
Sep 21 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 PDO函数库详解
2010/04/27 PHP
php中邮箱地址正则表达式实现与详解
2012/04/24 PHP
MySQL 日期时间函数常用总结
2012/06/12 PHP
php使用cookie保存登录用户名的方法
2015/01/26 PHP
Symfony的安装和配置方法
2016/03/17 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
jQuery的ready方法详解
2014/11/27 Javascript
举例讲解jQuery对DOM元素的向上遍历、向下遍历和水平遍历
2016/07/07 Javascript
JS模拟实现方法重载示例
2016/08/03 Javascript
bootstrap datepicker限定可选时间范围实现方法
2016/09/28 Javascript
Angular实现预加载延迟模块的示例
2017/10/12 Javascript
微信小程序实现列表下拉刷新上拉加载
2020/07/29 Javascript
jQuery实现使用sort方法对json数据排序的方法
2018/04/17 jQuery
微信小程序实现时间预约功能
2018/11/27 Javascript
jQuery实现容器间的元素拖拽功能
2020/12/01 jQuery
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
wxpython 学习笔记 第一天
2009/03/16 Python
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
Web服务器框架 Tornado简介
2014/07/16 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python 限制线程的最大数量的方法(Semaphore)
2019/02/22 Python
python mysql自增字段AUTO_INCREMENT值的修改方式
2020/05/18 Python
用Python进行websocket接口测试
2020/10/16 Python
pytorch简介
2020/11/11 Python
html5本地存储_动力节点Java学院整理
2017/07/12 HTML / CSS
美国著名的团购网站:Woot
2016/08/02 全球购物
PurCotton全棉时代官网:100%天然棉花生产的生活护理用品
2016/11/18 全球购物
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
Burt’s Bees英国官网:世界领先的天然个人护理品牌
2020/08/17 全球购物
党的群众路线教育实践活动对照检查材料思想汇报
2014/09/19 职场文书
党员干部四风问题整改措施思想汇报
2014/10/12 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
趣味运动会口号
2015/12/24 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript