当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 基于vue-ssr的静态网站生成器VuePress 初体验

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

2018年05月18日  | 移动技术网IT编程  | 我要评论

什么是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

打开

构建

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 初体验 ，希望对大家有所帮助

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网