基于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",
  "docs:build": "vuepress build docs"
 }
}

书写

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

预览

npm run docs:dev

打开 http://localhost:8080/

构建

npm run docs:build

生成的文件默认会在 .vuepress/dist 文件夹下

自定义配置

可以将配置文件写到 .vuepress/config.js 中

添加顶部导航

module.exports = {
 themeConfig: {
  nav: [
   { text: 'Home', link: '/' },
   { text: 'Guide', link: '/guide/' },
   { text: 'External', link: 'https://google.com' },
  ]
 }
}

添加侧边栏

module.exports = {
 themeConfig: {
  sidebar: [
   '/',
   '/page-a',
   ['/page-b', 'Explicit link text']
  ]
 }
}

同时支持分组添加侧边栏 eg:

module.exports = {
 themeConfig: {
  sidebar: [
   {
    title: 'Group 1',
    collapsable: false,
    children: [
     '/'
    ]
   },
   {
    title: 'Group 2',
    children: [ /* ... */ ]
   }
  ]
 }
}

总结

以上所述是小编给大家介绍的基于vue-ssr的静态网站生成器VuePress 初体验 ，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

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

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

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

  • Vue极简生成器 Vuepress的实现

    Vue极简生成器 Vuepress的实现

    目录 为什么要使用Vuepress create-vuepress-site 生成器 快速搭建项目 一.搭建本地开发环境 二.创建新的初始应用 三.启动应用服务器 云开发平台一键部署vuepress 一.创建环境 二.创建vuepress应用 创建前端应用. 三.在日常环境部署 阿里云开发平台多端应用 为什么要使用Vuepress VuePress由两部分组成:一个极简的静态站点生成器,带有一个vue支持的主题系统和Plugin API,以及一个为编写技术文档而优化的默认主题.创建它是为了支持V

  • 详解基于vue的服务端渲染框架NUXT

    Nuxt 随着现在vue和react的流行,许多网站都做成了SPA,确实提升了用户体验,但SPA也有两个弱点,就是SEO和首屏渲染速度.为了解决单页应用的痛点,基于vue和react的服务端渲染应运而生.由于公司的框架采用的是vue,所以就简单的研究了一下基于vue的服务端渲染框架--NUXT.在vue的官网有关于服务端渲染的详细介绍,而NUXT集成了利用Vue开发服务端渲染的应用所需要的各种配置,也集成了Vue2.vue-router.vuex.vux-meta(管理页面meta信息的),利用

  • Vue SSR 组件加载问题

    Vue SSR 组件加载问题

    Node 端渲染提示 window/document 没有定义 业务场景 首先来看一个简单的 Vue 组件 test.vue <template> <div> <h2>clientHeight: {{ clientHeight }} px </h2> </div> </template> <script type="text/babel"> export default { data(){ return

  • 详解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南

    正如Vue官方所说,SSR配置适合已经熟悉 Vue, webpack 和 Node.js 开发的开发者阅读.请先移步ssr.vuejs.org了解手工进行SSR配置的基本内容. 从头搭建一个服务端渲染的应用是相当复杂的.如果您有SSR需求,对Webpack及Koa不是很熟悉,请直接使用NUXT.js. 本文所述内容示例在 Vue SSR Koa2 脚手架 : https://github.com/yi-ge/Vue-SSR-Koa2-Scaffold 我们以撰写本文时的最新版:Vue 2,Web

  • 基于Vue CSR的微前端实现方案实践

    在这里就不讲微前端的各种优缺点,直接假设你在负责一个中后台管理系统的开发,所有的业务模块全部都在一个项目中打包,随着业务量的不断增长,编译越来越慢,你期望可以从老的项目中将新的业务进行独立开发.独立部署,以微应用的形式嵌入到老项目中. 本篇文章的受众是那些希望在新老的项目中,在不需要你对老项目进行改动老项目的前提下,嵌入微应用,如果本篇文章对你有帮助,请点个:+1:! 核心要素 构建生产环境代码,输出远程组件所需的 JSON 通过 ajax 请求,拿到这个 JSON 的数据,传给 远程组件 新项

  • 基于Vue实现HTML转PDF并导出

    基于Vue实现HTML转PDF并导出

    目录 前言 方案一 问题 解决方案 方案二 使用 问题及解决方案 方案三(推荐) 总结 前言 近期公司提出了一个新需求,希望前端能够根据UI设计绘制运动报告界面,完成数据展示,包括图标展示,并且能够将HTML页面转为PDF并实现下载.基于公司需求,查询了很多资料,最后选定了三种技术方案,并完成Demo,当然三种方案都有优缺点,所以还需要老大根据效果选定最终实现方案. 方案一 window.print浏览器打印是一个非常成熟的东西,直接调用window.print或者document.execCo

  • 基于Vue如何封装分页组件

    基于Vue如何封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px; } .page-bar { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-se

随机推荐