基于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 相关文章推荐
判断页面是关闭还是刷新的js代码
Jan 28 Javascript
页面按钮禁用与解除禁用的方法
Feb 19 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
jquery利用拖拽方式在图片上添加热链接
Nov 24 Javascript
AngularJS使用angular-formly进行表单验证
Dec 27 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
如何使用Vuex+Vue.js构建单页应用
Oct 27 Javascript
Javascript中的作用域及块级作用域
Dec 08 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
vue指令之表单控件绑定v-model v-model与v-bind结合使用
Apr 17 Javascript
VUE使用axios调用后台API接口的方法
Aug 03 Javascript
js实现简单扫雷
Nov 27 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
模拟xcopy的函数
2006/10/09 PHP
ezSQL PHP数据库操作类库
2010/05/16 PHP
PHP If Else(elsefi) 语句
2013/04/07 PHP
探讨:如何使用PHP实现计算两个日期间隔的年、月、周、日数
2013/06/13 PHP
用 Composer构建自己的 PHP 框架之设计 MVC
2014/10/30 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
PHP编程中的Session阻塞问题与解决方法分析
2017/08/07 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
基于jquery的防止大图片撑破页面的实现代码(立即缩放)
2011/10/24 Javascript
javascript五图轮播切换实用版
2012/08/17 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
jquery复选框多选赋值给文本框的方法
2015/01/27 Javascript
js生成随机数的方法实例
2015/10/16 Javascript
vue-cli webpack配置文件分析
2019/05/20 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
[00:35]DOTA2上海特级锦标赛 EG战队宣传片
2016/03/04 DOTA
浅谈Python生成器generator之next和send的运行流程(详解)
2017/05/08 Python
遗传算法python版
2018/03/19 Python
tensorflow与numpy的版本兼容性问题的解决
2021/01/08 Python
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
Html5 new XMLHttpRequest()监听附件上传进度
2021/01/14 HTML / CSS
Kent & Curwen:与大卫·贝克汉姆合作
2017/06/13 全球购物
台湾生鲜宅配:大口市集
2017/10/14 全球购物
耐克奥地利官网:Nike奥地利
2019/08/16 全球购物
大学生四年生活自我鉴定
2013/11/21 职场文书
演讲稿怎么写才完美
2014/01/02 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
《列夫托尔斯泰》教学反思
2014/02/10 职场文书
高中社区服务活动报告
2015/02/05 职场文书
整改通知书格式
2015/04/22 职场文书
运动会通讯稿100字
2015/07/20 职场文书
python神经网络编程之手写数字识别
2021/05/08 Python
详解Python自动化之文件自动化处理
2021/06/21 Python
MySQL开启事务的方式
2021/06/26 MySQL