vue在html页面中引用插件的顺序,直接拿来用！Vue.js 第三方经常使用插件盘点 | CSDN 博文精选...

做者 | 张猛javascript

责编 | 伍杏玲html

出品 | CSDN 博客vue

【CSDN 编者按】做者介绍几个Vue.js经常使用的插件和用法，简单实用，你能够直接拿来用！java

Vue.js DevToolsnode

用于开发调试Vue.js的一个必备插件。能够在Chrome中的扩展程序中直接安装，也能够本地文件的方式安装。webpack

vue-lazyload 图片懒加载git

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

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

一、安装：web

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

二、须要懒加载的图片绑定 v-bind:src 修改成 v-lazy

ECharts

在Vue中集成ECharts能够经过两种方式集成：ECharts和vue-echarts(注意：二者不要同时使用。)

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

一、安装ECharts依赖

二、HelloWorld.vue

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/

一、安装

二、在使用的组件中导入

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

utility

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

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

一、加密

MD5

SHA1

SHA256

HMAC

二、编码解码

Base64Encode

Base64Decode

Escape : HTML特殊字符转义

UnEscape

encodeURIComponent

decodeURIComponent

三、Date

accessLogDate

logDate

YYYYMMDDHHmmssSSS

YYYYMMDDHHmmss

YYYYMMDD

timestamp

四、Number

isSafeNumberString

toSafeNumber

random

五、Map

Map

Log

六、String

split

replace

七、JSON

strictJSONparse

readJSONSync

工具类Util

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

一、安装

二、使用

对于项目中经常使用的工具方法最好本身整理出来，统一使用本身写的工具类，要否则工具类有不少会引入不少，并且每一个开发者都不必定都知道每一个第三方工具类都包含什么方法，若是不知道极可能本身会再写一份实现，容易重复造轮子，若是本身将经常使用的工具方法都收集好统一使用本身的工具类，编码风格比较统一，没有就往本身工具类中添加，有就使用。

实用工具方法：

NProgress 页面顶部进度条

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

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

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

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

一、安装

二、在main.js中导入

三、HelloWorld.vue

四、Foo.vue

导出Excel

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

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

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

Export2Excel.js：

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

在alias中增长vendor别名代码：

四、在组件中使用

注意：

能够经过 xlsx-style 来指定单元格的样式, 例如居中、单元格颜色等。

能够经过merges 属性来合并单元格，合并单元格时须要将数据平铺开来。

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

导入Excel

导入只须要安装XLSX插件

ExcelImportExample.vue：

做者简介：张猛(mengday)，一个喜欢分享知识的程序员。

原文：https://blog.csdn.net/vbirdbest/article/details/86527886

声明：本文系CSDN原创博客，转载请联系原做者。

【End】

热 文 推 荐

点击阅读原文，输入关键词，便可搜索您想要的 CSDN 文章。

你点的每一个“在看”，我都认真当成了喜欢