五一之前就想写一篇关于Vuepress的文章,结果朋友结婚就不了了之了。

记得最后一定要看注意事项！

Vuepress介绍

官网：https://vuepress.vuejs.org/

类似hexo一个极简的静态网站生成器,用来写技术文档不能在爽。当然搭建成博客也不成问题。

Vuepress特点

• 响应式,也可以自定义主题与hexo类似
• 内置markdown(还增加了一些扩展),并且可以在其使用Vue组件
• Google Analytics 集成
• PWA 自动生成Service Worker

快速上手

安装

初始化项目

yarn init -y# 或者 npm init -y

安装vuepress

yarn add -D vuepress# 或者 npm install -D vuepress

全局安装vuepress

yarn global add vuepress# 或者 npm install -g vuepress

新建一个docs文件夹

mkdir docs

设置下package.json

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

写作

yarn docs:dev # 或者：npm run docs:dev

也就是运行开发环境,直接去docs文件下书写文章就可以,打开http://localhost:8080/可以预览

构建

build生成静态的HTML文件,默认会在 .vuepress/dist 文件夹下

yarn docs:build # 或者：npm run docs:build

基本配置

在 .vuepress 目录下新建一个 config.js ,他导出一个对象

一些配置可以参考官方文档,这里我配置常用及必须配置的

网站信息

module.exports = { title: '游魂的文档', description: 'Document library', head: [ ['link', { rel: 'icon', href: `/favicon.ico` }], ],}

导航栏配置

module.exports = { themeConfig: { nav: [ { text: '主页', link: '/' }, { text: '前端规范', link: '/frontEnd/' }, { text: '开发环境', link: '/development/' }, { text: '学习文档', link: '/notes/' }, { text: '游魂博客', link: 'https://:<USERNAME>/<REPO>.git master:gh-pagescd -

注意事项(坑)

• 把你想引用的资源都放在 .vuepress 目录下的 public 文件夹
• 给git仓库绑定了独立域名后,记得修改base 路径
• 设置侧边栏分组后默认会自动生成 上/下一篇链接
• 设置了自动生成侧边栏会把侧边栏分组覆盖掉
• 设置PWA记得开启SSL

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。