超详细动手搭建一个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-Mozilla和IE中的一个函数直接量的问题
Jan 09 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
Oct 26 Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 Javascript
网页实时显示服务器时间和javscript自运行时钟
Jun 09 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
jQuery自适应轮播图插件Swiper用法示例
Aug 24 Javascript
BootStrap selectpicker后台动态绑定数据的方法
Jul 28 Javascript
jquery easyui如何实现格式化列
Jul 30 jQuery
详解layui弹窗父子窗口之间传参数的方法
Jan 16 Javascript
vue增加强缓存和版本号的实现方法
May 01 Javascript
vue自定义指令实现仅支持输入数字和浮点型的示例
Oct 30 Javascript
详解js中的原型,原型对象,原型链
Jul 16 Javascript
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
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
php实现在线通讯录功能(附源码)
2016/05/13 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
gearman中worker常驻后台,导致MySQL server has gone away的解决方法
2020/02/27 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
JavaScript 异步方法队列链实现代码分析
2010/06/05 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
使用JS+plupload直接批量上传图片到又拍云
2014/12/01 Javascript
js封装可使用的构造函数继承用法分析
2015/01/28 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
jQuery DataTables插件自定义Ajax分页实例解析
2020/04/28 Javascript
JS中数组重排序方法
2016/11/11 Javascript
vue指令以及dom操作详解
2017/03/04 Javascript
Node.js调试技术总结分享
2017/03/12 Javascript
vue实现动态显示与隐藏底部导航的方法分析
2019/02/11 Javascript
Python实现的Kmeans++算法实例
2014/04/26 Python
Python序列化基础知识(json/pickle)
2017/10/19 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
Python函数定义及传参方式详解(4种)
2019/03/18 Python
Django中间件拦截未登录url实例详解
2019/09/03 Python
python导入不同目录下的自定义模块过程解析
2019/11/18 Python
python pptx复制指定页的ppt教程
2020/02/14 Python
Python多线程操作之互斥锁、递归锁、信号量、事件实例详解
2020/03/24 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
Tensorflow--取tensorf指定列的操作方式
2020/06/30 Python
Python GUI库Tkiner使用方法代码示例
2020/11/27 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
CSS3实例分享--超炫checkbox复选框和radio单选框
2014/09/01 HTML / CSS
用React加CSS3实现微信拆红包动画效果
2017/03/13 HTML / CSS
人民调解员培训方案
2014/06/05 职场文书
个人学习党的群众路线教育实践活动心得体会
2014/11/05 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
导游词之日本富士山
2020/01/06 职场文书