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

什么是VuePress

什么是VuePress

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

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

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

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

VuePress是怎样运作的

参考官方文档可知该项目有一下特点:

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

  • 内置markdown( 基础功能)
  • 支持PWA
  • 集成了Google Analytics
  • 拥有一套默认主题(风格
    与(官方文档)[https://vuepress.vuejs.org\]一致)
  • 自动 生成的GitHub链接和页面编辑链接

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

快速上手

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

安装

VuePress特性

初始化项目

  • 内置的markdown扩展专为技术文档优化
  • 可以在markdown文件中直接使用vue
  • vue驱动的可定制画主题
  • 支持PWA – Progressive Web App(渐进式网页应用程序)
  • 集成Google Analytics
  • 永利网址,一个默认的VuePress包括:

npm init -y

  1. 响应式布局
  2. 可选的主页
  3. 一个简单的头部搜索组件
  4. 可定制的导航栏和侧边栏
  5. 自动生成的GitHub链接和页面编辑链接

安装 vuepress,也可以全局安装

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

npm install -D vuepress

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

创建文章文件夹

总结

mkdir docs

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

配置package.json

您可能感兴趣的文章:

{
 "scripts": {
  "docs:dev": "vuepress dev docs",
  "docs:build": "vuepress build docs"
 }
}

书写

直接在docs文件夹下新建markdown文件即可编辑书写文章