【vue系列之三】从一个vue-pdf-shower，说说vue组件和npm包

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

前言

从去年年初开始，自己便下决心要写一个vue系列的博客，但时至今日，才写系列的第三篇博客，想来甚是惭愧。

但是慢归慢，每一篇都要保证质量，以及要写出自己的心路历程，防止自己工作中填的坑再让读者走一遍。

vue上手相对react来说是比较简单的，对于vue的基本指令以及语法，应该没有什么能比官网更详细，更生动的了。仔细想来，vue值得一说的，在项目中会让新手感到困惑的，是vue的组件，今天就最近工作中用到的一个pdf查看组件，和大家聊聊vue的组件。最后会讲如何将自己的代码封装成一个npm包，发布到npm官网。

去年5月份的，写了vue系列的第一篇使用vue-cli脚手架工具搭建vue-webpack项目，今天再次使用vue-cli初始化项目时，发现vue-cli已经升级到2.9.2。

多说一句，因为vue-cli的命令为vue，所以查看vue-cli的版本时，需要使用vue -V，而且是大写的V。仔细看下vue-cli 2.9的官方模板，惊喜的发现多了一个pwa模板。

前一阵子，谷歌开发者大会在上海举办，会上主推pwa，在这在简单说下PWA，大神可直接忽略。

简述PWA

PWA是Progressive Web App的缩写，字面意思理解为渐进增强的网页应用。一个 PWA 应用首先是一个网页, 可以通过 Web 技术编写出一个网页应用. 随后添加上 App Manifest 和 Service Worker 来实现 PWA 的安装和离线等功能。

在一个正常的HTML中，添加一个link标签，href为manifest.json，即可将你的网页应用添加到主屏幕。

manifest.json中会包含你的图标、名称。背景色等信息。

{
"name": "你的web app名称",
"short_name": "简称",
"display": "standalone",
"start_url": "/",
"theme_color": "主体色（#ffffff）",
"background_color": "背景色(#333333)",
"icons": [
{
"src": "icon.png",
"sizes": "256x256",
"type": "image/png"
}
]
}

引入manifest.json
<link rel="manifest" href="manifest.json" />

PWA应用能实现离线访问的核心是Service Worker，Service Worker 在网页已经关闭的情况下还可以运行, 用来实现页面的缓存和离线, 后台通知等等功能。

为了让应用离线工作，需要注册一个 service worker，一段允许在后台运行的脚本，不需要用户打开 web 页面，也不需要其他交互。在应用根目录放置serviceworker.js，然后在浏览器注册。

if('serviceWorker' in navigator) {
navigator.serviceWorker .register('/service-worker.js')
.then(function() { console.log('Service Worker Registered');
}); }

在serviceworker注册后，浏览器首次访问该应用时，会执行install方法，这个方法的callback中我们能够缓存所有需要缓存的数据。具体过程为：
首先定义需要缓存的文件类型，以及缓存存放路径；然后在网页相应所有请求之前，会将请求统一处理，可以控制一部分请求从缓存里拿数据。缓存会通过字符串名称，动态的更新。篇幅有限，这里大概简述下。具体可以移步饿了么团队知乎。

vue组件vue-pdf-shower

下面言归正传，说说vue组件。

最近笔者在项目中遇到一个pdf预览的需求，经过调研，最终决定用火狐的pdf.js封装一个vue组件。

其实需求还是比较简单的，就是后台给一个URL，前端将pdf加载到网页中即可。chrome和Firefox是自带pdf查看器的，简单的做法是使用iframe嵌入，但该方案兼容性太差，而且不受我们控制，所以pass了。

总体思路如下：

1.通过pdf.js提供的api，我们传入pdf的URL，在callback中会拿到所需的pdf对象。

2.通过传入不同的页码，可以拿到指定页面的page对象。

3.通过canvas，将page对象渲染到页面中。

4.遍历所有page，循环生成多个canvas对象，插入dom。

把思路缕清楚之后，开发就比较简单了。

首先，确定dom结构。由于我们的canvas是动态插入dom的，所以只提供一个wraper即可。

dom结构如下

<template>
<div class="pdf-wraper">
<div id="cvsWraper">
<div class="loading-pdf" v-if="isloading">{{loadingTxt}}</div>
</div>
</div>
</template>

vue-pdf-viewer组件js

该组件需要传两个参数，一个是URL，一个是缩放值scale。

vue组件需要显式说明自身期望传入哪些属性，并且可以赋予默认值。调用组件时，传入不同的属性，可以实现父组件向子组件传值。

props: {
pdfurl: {
default: ''
},
scale: {
default: 1
}
}

子组件向父组件传值

子组件向父组件通信时，需要使用vue.$emit事件。

$emit事件接受两个参数，第一个为所要抛出的方法名，第二个为所抛出方法带的参数。

在这个组件中，只暴露出一个onErr事件，即当pdf加载失败时的回调函数。

PDFJS.getDocument(me.pdfurl).then(function (pafObj) {
me.isloading = true;
me.pdfDoc = pafObj;
let totalNum = me.pdfDoc.numPages; // 循环渲染所有canvas
for (let i = 1; i <= totalNum; i++) {
let id = `canvas${i}`;
let cvsNode = document.createElement('canvas');
cvsNode.setAttribute('id', id);
cvsNode.setAttribute('class', 'canvas-item');
cvsWraper.appendChild(cvsNode);
me.renderPage(i); if (totalNum === i) {
me.isloading = false;
}
}
}).catch(function (err) {
me.loadingTxt = '加载失败，请稍后重试';
me.$emit('onErr', err);
});

调用组件

在调用组件时，需要传入所需的属性和方法。

非父子组件通信

兄弟组件通信也是比较常见的，比如说在一个页面中，导航是一个组件，内容区域是一个组件；当导航切换时，需要通知内容组件发生变化，并告诉他导航的id。

处理兄弟组件通信的问题，一般有两种方式：

1.兄弟组件都引入一个公共vue组件hub，通过hub抛出事件，和监听事件，以达到兄弟组件通信。

2.使用vuex。

项目中比较常见的是第一种做法，我做的vue项目中只有一次使用到了vuex；我对vuex的理解是：

vuex类似于一个全局的存储空间，你可以把他理解为将需要传递的东西绑在了window下，所以在任何地方都可以拿到，并做修改。

在项目中用到的hub.js

/**
* @file 事件总线
* @author yangtianjiao
/
import Vue from 'vue';
export default new Vue({});

假设是上面说的那种情况，在导航组件切换时，通过hub发射信息：

hub.$emit('changeTableData', {
dateKey: this.curDateTab
});

内容区域监听hub发射的方法：

hub.$on('changeTableData', item => {
this.pageNum = 1;
this.total = 0;
this.dataList = [];
this.orderFieldId = 1;
this.orderType = 1;
this.contenctDesc = '';
this.emptyText = '数据加载中...';
this.isLoading = false;
});

在内容组件销毁时，取消对hub事件的监听

beforeDestroy() {
hub.$off('changeTableData');
}

兄弟组件通信并不复杂，但要深刻理解，必须在项目中多运用、实践。这块应该是vue最难的部分了，这块掌握了，vue项目做起来就会得心应手。

发布npm包

大家平时工作中，最常用的是npm，很多包、类库都从npm安装。其实我们很容易就会发布属于自己的npm包，下面我会一步步讲讲如何将上述的vue-pdf-viewer组件发布到npm官网的。

1.执行npm init

执行npm init后，根据命令行提示，依次输入

包名称

版本

描述

入口文件

测试脚本

关键词

作者

版权信息（协议）

等等，最后OK，生成一个package.json文件。

2.确定包的目录结构

package.json是npm帮我们生成的，根目录下有入口文件index.js，和readme.md。

index.js中其实就是一句话，将真正的index.vue暴露出去

index.js

/**
* @file vue-pdf-shower
* @author v_yangtianjiao(v_yangtianjiao@baidu.com)
* @time 18/01/15
*/
module.exports = require('./lib/index.vue');

readme中放有对包的简述，以及包的基本用法

readme.md

# vue-pdf-shower## 介绍
> 基于pdf.js的pdf简易查看组件。
> 该组件加载全部pdf页面，不提供翻页查看功能。## github
[vue-pdf-shower](https://github.com/TJ666/vue-pdf-shower)## install
```
npm i vue-pdf-shower --save
```
## example
```
<template>
<div>
<pdfshower
:pdfurl="pdfurls"
:scale="scale"
@onErr="onErr"
></pdfshower>
</div>
</template><script>
import pdfshower from 'vue-pdf-shower';
export default {
name: 'pdfshower',
components: {
pdfshower
},
data() {
return {
// 所查看的pdf url
pdfurls: '//cdn.mozilla.net/pdfjs/tracemonkey.pdf',
// 缩放默认为1
scale: 1.2
};
},
methods: {
// 加载失败的callback
onErr(err) {
console.log('pdf加载失败，请重试');
console.log('错误信息：', err);
}
}
};
</script>
```