超详细动手搭建一个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 相关文章推荐
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
js判断当前页面在移动设备还是在PC端中打开
Jan 06 Javascript
浅谈JavaScript中的this指针和引用知识
Aug 05 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
Sep 05 jQuery
jQuery响应滚动条事件功能示例
Oct 14 jQuery
vue2.0与bootstrap3实现列表分页效果
Nov 28 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
微信小程序与公众号实现数据互通的方法
Jul 25 Javascript
vue实现简单加法计算器
Oct 22 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
Eclipse中php插件安装及Xdebug配置的使用详解
2013/04/25 PHP
php实现的读取CSV文件函数示例
2017/02/07 PHP
PHP实现图片批量打包下载功能
2017/03/01 PHP
[原创]PHP实现SQL语句格式化功能的方法
2017/07/28 PHP
让jQuery与其他JavaScript库并存避免冲突的方法
2013/12/23 Javascript
js实现模拟银行卡账号输入显示效果
2015/11/18 Javascript
举例说明JavaScript中的实例对象与原型对象
2016/03/11 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
详解Angular2中的编程对象Observable
2016/09/17 Javascript
NodeJS使用formidable实现文件上传
2016/10/27 NodeJs
基于Three.js插件制作360度全景图
2016/11/29 Javascript
JS验证不重复验证码
2017/02/10 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
详解AngularJS2 Http服务
2017/06/26 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
jQuery实现视频展示效果
2020/05/30 jQuery
vue插件--仿微信小程序showModel实现模态提示窗功能
2020/08/19 Javascript
[04:09]显微镜下的DOTA2第十二期—NaVi美如画的团战
2014/06/23 DOTA
[00:32]2018DOTA2亚洲邀请赛OpTic出场
2018/04/03 DOTA
videocapture库制作python视频高速传输程序
2013/12/23 Python
Django中模型Model添加JSON类型字段的方法
2015/06/17 Python
Python排序搜索基本算法之插入排序实例分析
2017/12/11 Python
pandas对指定列进行填充的方法
2018/04/11 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
python的slice notation的特殊用法详解
2019/12/27 Python
Boutique 1美国:阿联酋奢侈时尚零售商
2017/10/16 全球购物
Linux如何压缩可执行文件
2013/10/21 面试题
十佳美德少年事迹材料
2014/02/05 职场文书
党支部三严三实对照检查材料思想汇报
2014/09/29 职场文书
检讨书范文300字
2015/01/28 职场文书
【海涛DOTA】D-cup邀请赛NV.cn vs DT.Love
2022/04/01 DOTA