基于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 相关文章推荐
DHTML Slide Show script图片轮换
Mar 03 Javascript
JavaScript中的常见问题解决方法(乱码,IE缓存,代理)
Nov 28 Javascript
javascript实现Email邮件显示与删除功能
Nov 21 Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
Sep 22 Javascript
VUEJS 2.0 子组件访问/调用父组件的实例
Feb 10 Javascript
angular4笔记系列之内置指令小结
Nov 09 Javascript
webpack4 从零学习常用配置(小结)
May 28 Javascript
手把手教你 CKEDITOR 4 实现Dialog 内嵌 IFrame操作详解
Jun 18 Javascript
Node.js系列之连接DB的方法(3)
Aug 30 Javascript
js实现登录时记住密码的方法分析
Apr 05 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
某大型网络公司应聘时的笔试题目附答案
2008/03/27 PHP
PHP中输出转义JavaScript代码的实现代码
2011/04/22 PHP
phpExcel导出大量数据出现内存溢出错误的解决方法
2013/02/28 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
php实现cookie加密的方法
2015/03/10 PHP
PHP+mysql防止SQL注入的方法小结
2019/04/27 PHP
jquery用offset()方法获得元素的xy坐标
2014/09/06 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Node.js数据库操作之查询MySQL数据库(二)
2017/03/04 Javascript
JavaScript闭包的简单应用
2017/09/01 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
nodeJS服务器的创建和重新启动的实现方法
2018/05/12 NodeJs
JavaScript实现读取与输出XML文件数据的方法示例
2018/06/05 Javascript
vue中的v-model原理,与组件自定义v-model详解
2020/08/04 Javascript
python的几种开发工具介绍
2007/03/07 Python
Python中操作MySQL入门实例
2015/02/08 Python
WINDOWS 同时安装 python2 python3 后 pip 错误的解决方法
2017/03/16 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
解决python文件字符串转列表时遇到空行的问题
2017/07/09 Python
python绘制条形图方法代码详解
2017/12/19 Python
python批量读取txt文件为DataFrame的方法
2018/04/03 Python
对python 操作solr索引数据的实例详解
2018/12/07 Python
详解小白之KMP算法及python实现
2019/04/04 Python
Python实现的文轩网爬虫完整示例
2019/05/16 Python
python 处理微信对账单数据的实例代码
2019/07/19 Python
python:动态路由的Flask程序代码
2019/11/22 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
用python打开摄像头并把图像传回qq邮箱(Pyinstaller打包)
2020/05/17 Python
西海岸男士和男童服装:Johnnie-O
2018/03/15 全球购物
c++工程师面试问题
2013/08/04 面试题
教师个人工作总结范文2014
2014/11/10 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
在Python中如何使用yield
2021/06/07 Python