超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法


Posted in Javascript onJanuary 27, 2019

五一之前就想写一篇关于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/可以预览

超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法 

构建

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://www.iyouhun.com' },
   // 下拉列表的配置
   {
    text: 'Languages',
    items: [
     { text: 'Chinese', link: '/language/chinese' },
     { text: 'English', link: '/language/English' }
    ]
   }
  ]
 }
}

如图:

超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法 

侧边栏配置

可以省略 .md 扩展名,同时以 / 结尾的路径将会被视为 */README.md

module.exports = {
 themeConfig: {
  sidebar: {
   '/frontEnd/': genSidebarConfig('前端开发规范'),
  }
 }
}

上面封装的 genSidebarConfig 函数

function genSidebarConfig(title) {
 return [{
  title,
  collapsable: false,
  children: [
   '',
   'html-standard',
   'css-standard',
   'js-standard',
   'git-standard'
  ]
 }]
}

支持侧边栏分组(可以用来做博客文章分类) collapsable是当前分组是否展开

module.exports = {
 themeConfig: {
  sidebar: {
   '/note': [
    {
     title:'前端',
     collapsable: true,
     children:[
      '/notes/frontEnd/VueJS组件编码规范',
      '/notes/frontEnd/vue-cli脚手架快速搭建项目',
      '/notes/frontEnd/深入理解vue中的slot与slot-scope',
      '/notes/frontEnd/webpack入门',
      '/notes/frontEnd/PWA介绍及快速上手搭建一个PWA应用',
     ]
    },
    {
     title:'后端',
     collapsable: true,
     children:[
      'notes/backEnd/nginx入门',
      'notes/backEnd/CentOS如何挂载磁盘',
     ]
    },
   ]
  }
 }
}

如图:

超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法 

默认主题修改

主题色修改

.vuepress 目录下的创建一个 override.styl 文件

$accentColor = #3eaf7c // 主题色
$textColor = #2c3e50 // 文字颜色
$borderColor = #eaecef // 边框颜色
$codeBgColor = #282c34 // 代码背景颜色

自定义页面类

有时需要在不同的页面应用不同的css,可以先在该页面中声明

---
pageClass: custom-page-class
---

然后在 override.styl 中书写

.theme-container.custom-page-class {
 /* 特定页面的 CSS */
}

PWA设置

设置serviceWorker为true,然后提供Manifest 和 icons,可以参考我之前的《PWA介绍及快速上手搭建一个PWA应用 》

module.exports = {
 head: [
  ['link', { rel: 'icon', href: `/favicon.ico` }],
  //增加manifest.json
  ['link', { rel: 'manifest', href: '/manifest.json' }],
 ],
 serviceWorker: true,
}

部署上线

设置基础路径

config.js 设置base 例如:你想要部署在https://foo.github.io 那么设置base为 / ,base默认就为 / ,所以可以不用设置 想要部署在https://foo.github.io/bar/,那么 base 应该被设置成 "/bar/"

module.exports = {
 base: '/documents/',
}

base 将会自动地作为前缀插入到所有以 / 开始的其他选项的链接中,所以你只需要指定一次。

构建与自动部署

用 gitHub 的pages或者coding的pages都可以,也可以搭建在自己的服务器上。 将 dist 文件夹中的内容提交到git上或者上传到服务器就好

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

另外可以弄一个脚本,设置持续集成,在每次 push 代码时自动运行脚本

deploy.sh

#!/usr/bin/env sh

# 确保脚本抛出遇到的错误
set -e

# 生成静态文件
npm run docs:build

# 进入生成的文件夹
cd docs/.vuepress/dist

# 如果是发布到自定义域名
# echo 'www.example.com' > CNAME

git init
git add -A
git commit -m 'deploy'

# 如果发布到 https://<USERNAME>.github.io
# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master

# 如果发布到 https://<USERNAME>.github.io/<REPO>
git push -f git@github.com:<USERNAME>/<REPO>.git master:gh-pages

cd -

注意事项(坑)

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

 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS面向对象编程之对象使用分析
Aug 19 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
Jan 14 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
js浏览器html5表单验证
Oct 17 Javascript
详解js的作用域、预解析机制
Feb 05 Javascript
解决vue 项目引入字体图标报错、不显示等问题
Sep 01 Javascript
详解js访问对象的属性和方法
Oct 25 Javascript
解决vue自定义指令导致的内存泄漏问题
Aug 04 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
Aug 10 Javascript
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
PWA介绍及快速上手搭建一个PWA应用的方法
Jan 27 #Javascript
原生JS检测CSS3动画是否结束的方法详解
Jan 27 #Javascript
原生JS实现的跳一跳小游戏完整实例
Jan 27 #Javascript
nuxt中使用路由守卫的方法步骤
Jan 27 #Javascript
vue-cli构建vue项目的步骤详解
Jan 27 #Javascript
vue实现的仿淘宝购物车功能详解
Jan 27 #Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 #Javascript
You might like
PHP 存储文本换行实现方法
2010/01/05 PHP
从零开始学YII2框架(二)通过 Composer 安装扩展插件
2014/08/20 PHP
php实现简易聊天室应用代码
2015/09/23 PHP
php格式文件打开的四种方法
2018/02/24 PHP
html下载本地
2006/06/19 Javascript
基于jQuery的弹出警告对话框美化插件(警告,确认和提示)
2010/06/10 Javascript
如何通过javascript操作web控件的自定义属性
2013/11/25 Javascript
js插件方式打开pdf文件(浏览器pdf插件分享)
2013/12/20 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
2014/08/16 Javascript
根据当前时间在jsp页面上显示上午或下午
2014/08/18 Javascript
浅谈javascript 迭代方法
2015/01/21 Javascript
jQuery替换textarea中换行的方法
2015/06/10 Javascript
javascript模块化简单解析
2016/04/07 Javascript
bootstrap模态框跳转到当前模板页面 框消失了而背景存在问题的解决方法
2020/11/30 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
基于nodejs实现微信支付功能
2017/12/20 NodeJs
js Math数学简单使用操作示例
2020/03/13 Javascript
python 输出一个两行字符的变量
2009/02/05 Python
python中os操作文件及文件路径实例汇总
2015/01/15 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Python中使用装饰器来优化尾递归的示例
2016/06/18 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
Python面向对象编程基础解析(二)
2017/10/26 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
Python对多属性的重复数据去重实例
2018/04/18 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
django如何通过类视图使用装饰器
2019/07/24 Python
python读取多层嵌套文件夹中的文件实例
2020/02/27 Python
python动态规划算法实例详解
2020/11/22 Python
Python结合百度语音识别实现实时翻译软件的实现
2021/01/18 Python
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
应届大学生自荐信
2013/12/05 职场文书
毕业设计指导教师评语
2014/12/30 职场文书
基于python定位棋子位置及识别棋子颜色
2021/07/26 Python
Python开发简易五子棋小游戏
2022/05/02 Python