网络编程
位置：首页>> 网络编程>> JavaScript>> 基于vue-ssr的静态网站生成器VuePress 初体验

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

作者：狗子略略略　　发布时间：2024-05-09 09:32:38　

标签：vue,ssr

什么是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 初体验 网站的支持！

来源：https://juejin.im/post/5ad44a1b5188255569197482

0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com