当前位置:首页 > 编程教程 > vue技术文章 > 基于VuePress 轻量级静态网站生成器的实现方法

详解基于VuePress 轻量级静态网站生成器如何实现

  • 发布时间:
  • 作者:码农之家
  • 点击:79

这篇文章主要知识点是关于vuepress、静态网站生成器、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Spring Boot+Vue全栈开发实战
  • 类型:Spring大小:196.3 MB格式:PDF作者:王松
立即下载

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue 相关电子书
学习笔记
网友NO.273331

VuePress 静态网站生成方法步骤

使用技术: VuePress - Vue 驱动的静态网站生成器 仓库地址:https://github.com/yinian-R/vuepress-demo 全局安装 ## 安装yarn global add vuepress # 或者:npm install -g vuepress 现有项目 如果你想在一个现有项目中使用 VuePress,同时想要在该项目中管理文档,则应该将 VuePress 安装为本地依赖。 ## 没有项目可以初始化yarn init## 将 VuePress 作为一个本地依赖安装yarn add -D vuepress # 或者:npm install -D vuepress## 新建一个 docs 文件夹mkdir docs## 新建一个 markdown 文件echo # Hello VuePress! docs/README.md## 开始写作npx vuepress dev docs 接着,在 package.json 里加一些脚本: { "scripts": { "docs:dev": "vuepress dev docs", "docs:build": "vuepress build docs" }} 基本配置 .├─ docs│ ├─ README.md│ └─ .vuepress│ └─ config.js 一个 VuePress 网站必要的配置文件是 .vuepress/config.js,它应该导出一个 JavaScript 对象: module.exports = { title: '……

网友NO.840740

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

什么是VuePress VuePress由两部分组成:一个基于Vue的轻量级静态网站生成器,以及为编写技术文档而优化的默认主题。 它是为了满足Vue自己的子项目文档的需求而创建的。 VuePress为每一个由它生成的页面提供预加载的html,不仅加载速度极佳,同时对seo非常友好。一旦页面被加载之后,Vue就全面接管所有的静态内容,使其变成一个完全的SPA应用,其他的页面也会在用户使用导航进入的时候来按需加载。 参考官方文档可知该项目有一下特点: 内置markdown(基础功能) 支持PWA 集成了Google Analytics 拥有一套默认主题(风格与(官方文档)[https://vuepress.vuejs.org]一致) 自动生成的GitHub链接和页面编辑链接 快速上手 安装 初始化项目 npm init -y 安装 vuepress,也可以全局安装 npm install -D vuepress 创建文章文件夹 mkdir docs 配置package.json { "scripts": { "docs:dev": "vuepress dev docs", ……

网友NO.633216

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

什么是vuePress vuePress是以vue驱动的主题系统的简约静态网站生成工具(拥有自己的默认主题)。 veuPress由vue,vue-router,webpack驱动的单页面应用,每个markdonw文件都使用markdonw-it编译为html文件,然后作为vue组件的模板来处理。 中文官网 VuePress仓库 项目地址 VuePress 有很多优点: 界面简洁优雅(个人感觉比 HEXO 好看) 容易上手(半小时能搭好整个项目) 更好的兼容、扩展 Markdown 语法 响应式布局,PC端、手机端 Google Analytics 集成 支持 PWA 安装vuePress 全局安装 在此方式中,只是要项目根目录创建了一个README.md文件,直接执行访问的就是此文件 npm install -g vuepress# 创建一个 markdown 文件echo '# Hello VuePress' README.md# 开始编写文档vuepress dev# 构建vuepress build 在已有项目中安装 # 安装为本地依赖项npm install -D vuepress# 创建一个 docs 目录mkdir docs# 创建一个 markdown 文件echo '……

<
1
>

Copyright 2018-2020 www.xz577.com 码农之家

版权投诉 / 书籍推广 / 赞助:520161757@qq.com