超详细动手搭建一个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函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 Javascript
基于jquery的关于动态创建DOM元素的问题
Dec 24 Javascript
javascript中的delete使用详解
Apr 11 Javascript
JavaScript将字符串转换为整数的方法
Apr 14 Javascript
Vue.js实战之组件之间的数据传递
Apr 01 Javascript
JS实现数组去重,显示重复元素及个数的方法示例
Jan 21 Javascript
详解vue中router-link标签所必备了解的属性
Apr 15 Javascript
vue实现多条件和模糊搜索功能
May 28 Javascript
解决一个微信号同时支持多个环境网页授权问题
Aug 07 Javascript
jQuery 淡入/淡出效果函数用法分析
May 19 jQuery
JavaScript实现跟随鼠标移动的盒子
Jan 28 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
PHP5中使用DOM控制XML实现代码
2010/05/07 PHP
php中将图片gif,jpg或mysql longblob或blob字段值转换成16进制字符串
2011/08/23 PHP
php 抽象类的简单应用
2011/09/06 PHP
php生成唯一数字id的方法汇总
2015/11/18 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
Symfony2使用Doctrine进行数据库查询方法实例总结
2016/03/18 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
jquery 查找新建元素代码
2010/07/06 Javascript
js判断选择时间不能小于当前时间的示例代码
2013/09/24 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
node.js中的http.request.end方法使用说明
2014/12/10 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
js实现文字滚动效果
2016/03/03 Javascript
javascript鼠标滑过显示二级菜单特效
2020/11/18 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
vue做网页开场视频的实例代码
2017/10/20 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python cookbook(数据结构与算法)在字典中将键映射到多个值上的方法
2018/02/18 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
python批量爬取下载抖音视频
2019/06/17 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
查看端口并杀进程python脚本代码
2019/12/17 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
python如何实现word批量转HTML
2020/09/30 Python
使用CSS3的font-face字体嵌入样式的方法讲解
2016/05/13 HTML / CSS
HTML5 Canvas玩转酷炫大波浪进度图效果实例(附demo)
2016/12/14 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
中西医结合临床医学专业大学生自荐信
2013/09/28 职场文书
学校先进集体事迹材料
2014/05/31 职场文书
2015年复活节活动总结
2015/02/27 职场文书
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技