五一之前就想写一篇关于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
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
最新文章
热门文章
猜你喜欢
