超详细动手搭建一个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 相关文章推荐
javascript 哈希表(hashtable)的简单实现
Jan 20 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
JavaScript修改浏览器tab标题小技巧
Jan 06 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
详解angular如何调用HTML字符串的方法
Jun 30 Javascript
浅谈Vuex注入Vue生命周期的过程
May 20 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
JQuery使用属性addClass、removeClass和toggleClass实现增加和删除类操作示例
Nov 18 jQuery
vue跳转方式(打开新页面)及传参操作示例
Jan 26 Javascript
JS实现表单中点击小眼睛显示隐藏密码框中的密码
Apr 13 Javascript
Vue实现跑马灯效果
May 25 Javascript
Vue router配置与使用分析讲解
Dec 24 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中static静态变量的使用方法详解
2010/06/04 PHP
php 传值赋值与引用赋值的区别
2010/12/29 PHP
浅析php中jsonp的跨域实例
2013/06/21 PHP
PHP文件大小格式化函数合集
2014/03/10 PHP
Yii配置与使用memcached缓存的方法
2016/07/13 PHP
CI框架教程之优化验证码机制详解【验证码辅助函数】
2019/04/16 PHP
ExtJS 2.2.1的grid控件在ie6中的显示问题
2009/05/04 Javascript
javascript 继承实现方法
2009/08/26 Javascript
Ext对基本类型的扩展 ext,extjs,format
2010/12/25 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
javascript常用对话框小集
2013/09/13 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
javascript如何创建对象
2016/08/29 Javascript
JavaScript构建自己的对象示例
2016/11/29 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
微信小程序获取手机系统信息的方法【附源码下载】
2017/12/07 Javascript
jquery获取file表单选择文件的路径、名字、大小、类型
2019/01/18 jQuery
配置一个vue3.0项目的完整步骤
2019/04/26 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
python解决汉字编码问题:Unicode Decode Error
2017/01/19 Python
Python字典,函数,全局变量代码解析
2017/12/18 Python
Python实现的求解最小公倍数算法示例
2018/05/03 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python爬虫 urllib模块发起post请求过程解析
2019/08/20 Python
使用python批量转换文件编码为UTF-8的实现
2020/04/03 Python
python读取配置文件方式(ini、yaml、xml)
2020/04/09 Python
浅谈Pycharm的项目文件名是红色的原因及解决方式
2020/06/01 Python
如何利用python检测图片是否包含二维码
2020/10/15 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
2014年公务员转正工作总结
2014/11/07 职场文书
Nginx+Tomcat负载均衡集群的实现示例
2021/10/24 Servers