基于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 相关文章推荐
基于jquery的tab切换 js原理
Apr 01 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
JS中的数组的sort方法使用示例
Jan 22 Javascript
JS仿Windows开机启动Loading进度条的方法
Feb 26 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
分享经典的JavaScript开发技巧
Nov 21 Javascript
JavaScript动态检验密码强度的实现方法
Nov 09 Javascript
BootStrop前端框架入门教程详解
Dec 25 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
Vue实现搜索 和新闻列表功能简单范例
Mar 16 Javascript
node使用request请求的方法
Dec 20 Javascript
Vue+abp微信扫码登录的实现代码示例
Jan 06 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
Js中获取frames中的元素示例代码
2013/07/30 Javascript
jquery获取节点名称
2015/04/26 Javascript
《JavaScript函数式编程》读后感
2015/08/07 Javascript
跟我学习JScript的Bug与内存管理
2015/11/18 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
javaScript手机号码校验工具类PhoneUtils详解
2017/12/08 Javascript
微信小程序数据分析之自定义分析的实现
2018/08/17 Javascript
vue 优化CDN加速的方法示例
2018/09/19 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue3.0 自适应不同分辨率电脑的操作
2021/02/06 Vue.js
用python删除java文件头上版权信息的方法
2014/07/31 Python
详解Python装饰器由浅入深
2016/12/09 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
Python unittest工作原理和使用过程解析
2020/02/24 Python
Python实现弹球小游戏
2020/08/01 Python
MAC平台基于Python Appium环境搭建过程图解
2020/08/13 Python
解决pytorch 的state_dict()拷贝问题
2021/03/03 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
女子锻炼服装和瑜伽服装:Splits59
2019/03/04 全球购物
澳大利亚波西米亚风情网上商店:Czarina
2019/03/18 全球购物
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
教师业务培训方案
2014/05/01 职场文书
行政监察建议书
2014/05/19 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
社会工作专业自荐信
2014/09/26 职场文书
2014年心理健康教育工作总结
2014/12/06 职场文书
会计工作总结范文2014
2014/12/23 职场文书
三峡人家导游词
2015/01/31 职场文书
端午节活动总结报告
2015/02/11 职场文书
死亡诗社观后感
2015/06/05 职场文书
唐山大地震的观后感
2015/06/05 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
pytorch 梯度NAN异常值的解决方案
2021/06/05 Python
Django中celery的使用项目实例
2022/07/07 Python