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

什么是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 轻量级静态网站生成器的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

您可能感兴趣的文章:

  • 基于vue-ssr的静态网站生成器VuePress 初体验
  • 浅谈vuepress 踩坑记
赞 (0)

相关推荐

  • 浅谈vuepress 踩坑记

    vuepress是尤大大4月12日发布的一个全新的基于vue的静态网站生成器,实际上就是一个vue的spa应用,内置webpack,可以用来写文档.恰好最近需要为一些组件写文档,就动手撸了一波,毕竟刚发布,遇到不少坑,最终还是磕磕碰碰的运行起来了,为了避免大家踩同样的坑,特意将搭建的过程记录下来,分享一波. 以下是几个已知的问题 因为util.promisify是在node 8.0之后引入的,所以如果你不想像我一样浪费三个小时的时间,请查看并且更新node版本 建议不要使用webpack-sim

  • 基于vue-ssr的静态网站生成器VuePress 初体验

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. 参考官方文档可知该项目有一下特点: 内置markdown(基础功能) 支持PWA 集

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

    什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题. 它是为了满足Vue自己的子项目文档的需求而创建的. VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好.一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载. VuePress是怎样运作的 一个VuePress应用实际上就是基于Vue.VueR

  • VuePress 静态网站生成方法步骤

    使用技术: VuePress - Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装 yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖. ## 没有项目可以初始化 yarn init ## 将 VuePress 作为一

  • Jekyll静态网站后台引擎使用教程

    以前总想搭建一个自己的个人网站,由于不懂php后台,所以在点点网开过自己的博客,后来慢慢向程序员转变,点点网的博客已经不能满足这个职业特定的需求,于是用worldpress搭建了自己的第一个网站,鼓捣过几天worldpress,从购买域名空间,修改空间域名解析,添加模板,修改模板,了解了worldpress的强大之处,但是鼓捣玩了worldpress之后,没有了写文章的动力,也没有用足够的时间来管理,以至于这个网站夭折.直到现在又开始鼓捣Jekyll静态网站后台引擎,下面就讲讲Jekyll的学习

  • 使用vuepress搭建静态博客的示例代码

    什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题). veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理. 中文官网 VuePress仓库 项目地址 VuePress 有很多优点: 界面简洁优雅(个人感觉比 HEXO 好看) 容易上手(半小时能搭好整个项目) 更好的兼容.扩展 Markdown 语法 响应式布

  • ASP.NET Core如何实现简单的静态网站滚动更新

    ASP.NET Core如何实现简单的静态网站滚动更新

    目录 Intro FileProvider Construct Host Demo More 总结 Intro 最近我们老板想让我实现一个静态网站"滚动更新"的功能,其实就是希望网站部署的时候网站内容完整的切换,不能网站部署的过程中一部分是新的内容,另外一部分是老的内容. 这让我想到了微软的 Azure App Service,上家公司主要是用微软的云服务 Azure,站点是部署到 Azure App Service 上的,Azure App Service 有一个部署槽的概念,我们的

  • 基于JavaScript实现购物网站商品放大镜效果

    大家几乎都有在网上购物的经验,有的网站会有一个商品放大镜功能,就是把鼠标移到图片上的时候,旁边会有另外一张大的图片展示,等同于放大镜效果,那这样的效果怎样实现的呢,我把代码发给大家,请大家参考. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>放大镜</title> <style> *{mar

  • 用PHP制作静态网站的模板框架(一)

    模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运用模板控制页面布局. 提纲: =================================== 分离功能和布局 避免页面元素重复 静态网站的模板框架 =================================== 分离功能和布局 首先我们来看看应用模板的两个主要目的: 分离功能(PHP)和布局(HTML) 避免页面元素重复 第一个目的是谈论得最多的目的,它设想的情形是

  • 用PHP制作静态网站的模板框架

    用PHP制作静态网站的模板框架

    模板能够改善网站的结构.本文阐述如何通过PHP 4的一个新功能和模板类,在由大量静态HTML页面构成的网站中巧妙地运用模板控制页面布局. 提纲: =================================== 分离功能和布局 避免页面元素重复 静态网站的模板框架 =================================== 分离功能和布局 首先我们来看看应用模板的两个主要目的: 分离功能(PHP)和布局(HTML) 避免页面元素重复 第一个目的是谈论得最多的目的,它设想的情形是

  • 用PHP制作静态网站的模板框架(四)

    静态网站的模板框架 首先,我们象前面一样为所有的页面公用元素以及页面整体布局编写模板文件:然后从所有的页面删除公共部分,只留下页面内容:接下来再在每个页面中加上三行PHP代码,如下所示: <?php <!-- home.php --> <?php require('prepend.php'); ?> <?php pageStart('Home'); ?> <h1>你好</h1> <p>欢迎访问</p> <img

随机推荐