Vue.js 第三方常用插件盘点

vue-lazyload 图片懒加载

插件地址：https://github.com/hilongjw/vue-lazyload

Demo：http://hilongjw.github.io/vue-lazyload/

1、安装：

cnpminstallvue-lazyload–save

src/main.js 导入import并使用use插件：

importVueLazyloadfrom’vue-lazyload’
Vue.use(VueLazyload)
//也可以配置一些选项,建议使用这种配置方式，配置一些参数
Vue.use(VueLazyload,{
preLoad:1.3,
error:‘dist/error.png’,
loading:‘dist/loading.gif’,
attempt:1
})

2、需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

ECharts

在Vue中集成ECharts可以通过两种方式集成：ECharts和vue-echarts（注意：两者不要同时使用。）

官方示例：https://echarts.baidu.com/examples/

1、安装ECharts依赖

cnpminstallecharts-S

vue-amap 高德地图

vue-amap是一套基于Vue 2.0和高德地图的地图组件。

官方文档 https://elemefe.github.io/vue-amap ,具体使用方法可以参考node_modules/vue-amap/README.md 文档中有详细使用方法。

moment.js

moment.js 日期处理类库。中文网站：http://momentjs.cn/

1、安装

cnpminstallmoment–save

2、在使用的组件中导入

注意：moment.js中的日期格式化与其它语言如(Java)中的格式不太一样。

utility

GitHub地址：https://github.com/node-modules/utility

utility是一套实用工具类，使用非常简单直接看GitHub地址或者npm安装之后看该插件下的README.md文件，主要包括以下工具方法：

1、加密

MD5

SHA1

SHA256

HMAC

2、编码解码

Base64Encode

Base64Decode

Escape : HTML特殊字符转义

UnEscape

encodeURIComponent

decodeURIComponent

3、Date

accessLogDate

logDate

YYYYMMDDHHmmssSSS

YYYYMMDDHHmmss

YYYYMMDD

timestamp

4、Number

isSafeNumberString

toSafeNumber

random

5、Map

Map

Log

6、String

split

replace

7、JSON

strictJSONparse

readJSONSync

工具类Util

一个小工具类：http://nodejs.org/api/util.html

1、安装

cnpminstallutil

2、使用

importutilfrom’util’
util.format(’%s:%s’,‘foo’,‘bar’)

对于项目中常用的工具方法最好自己整理出来，统一使用自己写的工具类，要不然工具类有很多会引入很多，而且每个开发者都不一定都知道每个第三方工具类都包含什么方法，如果不知道很可能自己会再写一份实现，容易重复造轮子，如果自己将常用的工具方法都收集好统一使用自己的工具类，编码风格比较统一，没有就往自己工具类中添加，有就使用。

实用工具方法：

//生产环境下禁止输出日志
debugLog(str){
if(process.env.NODE_ENV!==‘production’){
console.log(str)
}
}

NProgress 页面顶部进度条

当路由切换事会在浏览器的顶部出现一个蓝色进度条用于表示路由切换的进度，并在又上角有个蓝色loading的动画。

一般情况下切换到目标路由时，在目标路由中的生命周期中可能会做一些处理(如请求接口等)，这些操作会有一定的耗时，所以使用进度条来表示路由切换的进度。

CSDN在切换路由时就有这种效果。只不过CSDN的进度条是红色的，右上角没有loading。

GitHub: https://github.com/rstacruz/nprogress

1、安装

cnpminstall–savenprogress

2、在main.js中导入

importNProgressfrom’nprogress’
import’nprogress/nprogress.css’
//配置NProgress选项
//NProgress.configure({})
//在路由页面跳转使用
router.beforeEach((to,from,next)=>{
//开始进度条
NProgress.start()
//继续路由
next()
})
router.afterEach(transition=>{
//结束进度条
NProgress.done()
})

3、HelloWorld.vue

4、Foo.vue

导出Excel

1、安装组件 file-saver、xlsx、xlsx-style、script-loader

cnpminstall-Sfile-saverxlsxxlsx-style
cnpminstall-Dscript-loader

2、在src下创建vendor文件夹，并创建Blob.js和Export2Excel.js两个文件

Blob.js 文件地址：https://github.com/eligrey/Blob.js

Export2Excel.js：

/eslint-disable/
file-saver’);
@/vendor/Blob’);
xlsx-style/dist/xlsx.core.min’);
xlsx-style/dist/xlsx.full.min’);
importXLSXfrom’xlsx’
functiongenerateArray(table){
varout=[];
varrows=table.querySelectorAll(‘tr’);
varranges=[];
for(varR=0;R
varoutRow=[];
varrow=rows[R];
varcolumns=row.querySelectorAll(‘td’);
for(varC=0;C
varcell=columns[C];
varcolspan=cell.getAttribute(‘colspan’);
varrowspan=cell.getAttribute(‘rowspan’);
varcellValue=cell.innerText;
if(cellValue!""&&cellValue+cellValue)cellValue=+cellValue;
//Skipranges
ranges.forEach(function(range){
if(R>=range.s.r&&R<=range.e.r&&outRow.length>=range.s.c&&outRow.length<=range.e.c){
for(vari=0;i<=range.e.c-range.s.c;++i)outRow.push(null);
}
});
//HandleRowSpan
if(rowspan||colspan){
rowspan=rowspan||1;
colspan=colspan||1;
ranges.push({
s:{
r:R,
c:outRow.length
},
e:{
r:R+rowspan-1,
c:outRow.length+colspan-1
}
});
};
//HandleValue
outRow.push(cellValue!""?cellValue:null);
//HandleColspan
if(colspan)
for(vark=0;k
}
out.push(outRow);
}
return[out,ranges];
};
functiondatenum(v,date1904){
if(date1904)v+=1462;
varepoch=Date.parse(v);
return(epoch-newDate(Date.UTC(1899,11,30)))/(246060*1000);
}
functionsheet_from_array_of_arrays(data,opts){
varws={};
varrange={
s:{
c:10000000,
r:10000000
},
e:{
c:0,
r:0
}
};
for(varR=0;R!=data.length;++R){
for(varC=0;C!=data[R].length;++C){
if(range.s.r>R)range.s.r=R;
if(range.s.c>C)range.s.c=C;
if(range.e.r
if(range.e.c
varcell={
v:data[R][C]
};
if(cell.vnull)continue;
varcell_ref=XLSX.utils.encode_cell({
c:C,
r:R
});
if(typeofcell.v===‘number’)cell.t=‘n’;
elseif(typeofcell.v===‘boolean’)cell.t=‘b’;
elseif(cell.vinstanceofDate){
cell.t=‘n’;
cell.z=XLSX.SSF._table[14];
cell.v=datenum(cell.v);
}elsecell.t=‘s’;
ws[cell_ref]=cell;
}
}
if(range.s.c<10000000)ws[’!ref’]=XLSX.utils.encode_range(range);
returnws;
}
functionWorkbook(){
if(!(thisinstanceofWorkbook))returnnewWorkbook();
this.SheetNames=[];
this.Sheets={};
}
functions2ab(s){
varbuf=newArrayBuffer(s.length);
varview=newUint8Array(buf);
for(vari=0;i!=s.length;++i)view[i]=s.charCodeAt(i)&0xFF;
returnbuf;
}
exportfunctionexport_table_to_excel(id){
vartheTable=document.getElementById(id);
varoo=generateArray(theTable);
varranges=oo[1];
/originaldata/
vardata=oo[0];
varws_name=“SheetJS”;
varwb=newWorkbook(),
ws=sheet_from_array_of_arrays(data);
/addrangestoworksheet/
//ws[’!cols’]=[‘apple’,‘banan’];
ws[’!merges’]=ranges;
/addworksheettoworkbook/
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name]=ws;
varwbout=XLSX.write(wb,{
bookType:‘xlsx’,
bookSST:false,
type:‘binary’
});
saveAs(newBlob([s2ab(wbout)],{
type:“application/octet-stream”
}),“test.xlsx”)
}
exportfunctionexport_json_to_excel({
multiHeader=[],
header,
data,
filename,
merges=[],
autoWidth=true,
bookType=‘xlsx’
}={}){
/originaldata/
filename=filename||‘excel-list’
data=[…data]
data.unshift(header);
for(leti=multiHeader.length-1;i>-1;i–){
data.unshift(multiHeader[i])
}
varws_name=“SheetJS”;
varwb=newWorkbook(),
ws=sheet_from_array_of_arrays(data);
//设置单元格样式
for(vari=0;i
varstr=String.fromCharCode((65+i));//ABCD…
//设备表头样式
varhead=str+“1”;
ws[head].s={
font:{sz:12,bold:true,color:{rgb:“000000”}},
alignment:{vertical:“center”,horizontal:“center”},
fill:{bgColor:{indexed:64},fgColor:{rgb:“FFFF00”}}
}
//设置内容样式
for(letj=2;j
varbody=str+j;
ws[body].s={font:{sz:12},alignment:{vertical:“center”,horizontal:“center”}}
}
}
if(merges.length>0){
if(!ws[’!merges’])ws[’!merges’]=[];
merges.forEach(item=>{
ws[’!merges’].push(item)
})
}
if(autoWidth){
/设置worksheet每列的最大宽度/
constcolWidth=data.map(row=>row.map(val=>{
/先判断是否为null/undefined/
if(val==null){
return{
‘wch’:10
};
}
/再判断是否为中文/
elseif(val.toString().charCodeAt(0)>255){
return{
‘wch’:val.toString().length*2
};
}else{
return{
‘wch’:val.toString().length
};
}
}))
/以第一行为初始值/
letresult=colWidth[0];
for(leti=1;i
for(letj=0;j
if(result[j][‘wch’]
result[j][‘wch’]=colWidth[i][j][‘wch’];
}
}
}
ws[’!cols’]=result;
}
/addworksheettoworkbook/
wb.SheetNames.push(ws_name);
wb.Sheets[ws_name]=ws;
varwbout=XLSX.write(wb,{
bookType:bookType,
bookSST:false,
type:‘binary’
});
saveAs(newBlob([s2ab(wbout)],{
type:“application/octet-stream”
}),\${filename}.\${bookType});
}

3、在webpack.base.conf.js中配置别名

在alias中增加vendor别名代码：

resolve:{
extensions:[’.js’,’.vue’,’.json’],
alias:{
‘vue$’:‘vue/dist/vue.esm.js’,
‘vendor’:path.resolve(__dirname,’…/src/vendor’),
‘@’:resolve(‘src’),
}
},

4、在组件中使用

注意：

可以通过 xlsx-style 来指定单元格的样式, 例如居中、单元格颜色等。

可以通过merges 属性来合并单元格，合并单元格时需要将数据平铺开来。

Export2Excel.js ：该文件是网上找的，可以根据自己的需求进行修改代码，这里有个Bug是样式没有设置成功。

导入Excel

导入只需要安装XLSX插件

npminstallxlsx–save

ExcelImportExample.vue：