基于VuePress 轻量级静态网站生成器的实现方法


Posted in Javascript onApril 17, 2018

什么是VuePress

VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。

VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好。一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载。

VuePress是怎样运作的

一个VuePress应用实际上就是基于Vue、VueRouter以及webpack,如果你以前就用过vue,那么当你在用VuePress开发或者定制自己的主题的时候,你会发现使用体验几乎是一毛一样~你甚至可以用Vue DevTools来debug你的定制主题!

在build的过程中,VuePress会通过创建一个服务端渲染的版本,并访问每一个路由来渲染相关的html。这种方法是来自Nuxt的nuxt generate命令,和其他项目如Gatsby的启发。

每个markdown文件都被编译为HTML,然后作为Vue组件的模板进行处理。这样你可以在markdown文件中直接使用Vue,这在需要嵌入动态内容的时候非常有用。

VuePress特性

  • 内置的markdown扩展专为技术文档优化
  • 可以在markdown文件中直接使用vue
  • vue驱动的可定制画主题
  • 支持PWA - Progressive Web App(渐进式网页应用程序)
  • 集成Google Analytics
  • 一个默认的VuePress包括:
  1. 响应式布局
  2. 可选的主页
  3. 一个简单的头部搜索组件
  4. 可定制的导航栏和侧边栏
  5. 自动生成的GitHub链接和页面编辑链接

VuePress 享用 Vue + webpack 开发环境,在 markdown 中使用 Vue 组件,并通过 Vue 开发自定义主题。VuePress 为每一个由它生成的页面提供预加载的 html,不仅加载速度极佳,同时对 seo 非常友好。一旦页面被加载之后,Vue 就全面接管所有的静态内容,使其变成一个完全的 SPA 应用,其他的页面也会在用户使用导航进入的时候来按需加载。

# install
npm install -g vuepress
# create a markdown file
echo '# Hello VuePress' > README.md
# start writing
vuepress dev
# build to static files
vuepress build

总结

以上所述是小编给大家介绍的基于VuePress 轻量级静态网站生成器的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
AngularJS使用ng-options指令实现下拉框
Aug 23 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
js与jquery分别实现tab标签页功能的方法
Nov 18 Javascript
jQuery实现的简单悬浮层功能完整实例
Jan 23 Javascript
原生JS实现圆环拖拽效果
Apr 07 Javascript
mongoose中利用populate处理嵌套的方法
May 26 Javascript
js Date()日期函数浏览器兼容问题解决方法
Sep 12 Javascript
Node.js实现一个HTTP服务器的方法示例
May 13 Javascript
微信小程序实现音乐播放页面布局
Dec 11 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
Apr 17 #Javascript
js闭包学习心得总结
Apr 17 #Javascript
Vue使用json-server进行后端数据模拟功能
Apr 17 #Javascript
js实现点击按钮复制文本功能
Jul 20 #Javascript
Element-UI Table组件上添加列拖拽效果实现方法
Apr 14 #Javascript
React中的render何时执行过程
Apr 13 #Javascript
全站最详细的Vuex教程
Apr 13 #Javascript
You might like
香妃
2021/03/03 冲泡冲煮
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
php中的时间处理
2006/10/09 PHP
计算php页面运行时间的函数介绍
2013/07/01 PHP
PHP防范SQL注入的具体方法详解(测试通过)
2014/05/09 PHP
PHP+jQuery+Ajax实现分页效果 jPaginate插件的应用
2015/10/09 PHP
php对文件夹进行相关操作(遍历、计算大小)
2015/11/04 PHP
Laravel SQL语句记录方式(推荐)
2016/05/26 PHP
php简单解析mysqli查询结果的方法(2种方法)
2016/06/29 PHP
注意!PHP 7中不要做的10件事
2016/09/18 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
javascript 24小时弹出一次的代码(利用cookies)
2009/09/03 Javascript
网页禁用右键实现代码(JavaScript代码)
2009/10/29 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
jQuery基础知识filter()和find()实例说明
2010/07/06 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
JavaScript实现自动对页面上敏感词进行屏蔽的方法
2015/07/27 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
微信小程序获取用户信息并保存登录状态详解
2019/05/10 Javascript
vue cli安装使用less的教程详解
2019/07/12 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
解决python写入mysql中datetime类型遇到的问题
2018/06/21 Python
transform python环境快速配置方法
2018/09/27 Python
python+numpy按行求一个二维数组的最大值方法
2019/07/09 Python
Pycharm 2020年最新激活码(亲测有效)
2020/09/18 Python
教师实习期自我鉴定
2013/10/06 职场文书
大学生安全责任书
2014/07/25 职场文书
自我管理的活动方案
2014/08/25 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
绿里奇迹观后感
2015/06/15 职场文书