Vue.js(九) 第三方常用插件

<>1. Vue.js devtools

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


<>2. vue-lazyload 图片懒加载

* 插件地址：https://github.com/hilongjw/vue-lazyload
<https://github.com/hilongjw/vue-lazyload>
* demo：http://hilongjw.github.io/vue-lazyload/
<http://hilongjw.github.io/vue-lazyload/>
<>2.1 安装 和 使用插件
cnpm install vue-lazyload --save
src/main.js 导入import并使用use插件
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // 也可以配置一些选项,
建议使用这种配置方式，配置一些参数 Vue.use(VueLazyload, { preLoad: 1.3, error: 'dist/error.png',
loading: 'dist/loading.gif', attempt: 1 })
keydescriptiondefaultoptions
preLoad proportion of pre-loading height（预加载高度比例） 1.3 Number
error src of the image upon load fail（图片路径错误时加载图片） 'data-src' String
loading src of the image while loading（预加载图片） 'data-src' String
attempt attempts count（尝试加载图片数量） 3 Number
listenEvents
events that you want vue listen for

（想要监听的vue事件）

默认['scroll']可以省略，

当插件跟页面中的动画或过渡等事件有冲突是，

可以尝试其他选项

['scroll'（默认）,

'wheel',

'mousewheel',

'resize',

'animationend',

'transitionend',

'touchmove']
Desired Listen Events
<https://www.npmjs.com/package/vue-lazyload#desired-listen-events>
adapter
dynamically modify the attribute of element

（动态修改元素属性）
{ } Element Adapter
<https://www.npmjs.com/package/vue-lazyload#element-adapter>
filter the image's listener filter（动态修改图片地址路径） { } Image listener filter
<https://www.npmjs.com/package/vue-lazyload#image-listener-filter>
lazyComponent lazyload component false Lazy Component
<https://www.npmjs.com/package/vue-lazyload#lazy-component>
dispatchEvent trigger the dom event false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: '0px', threshold:
0.1 } IntersectionObserver
<https://www.npmjs.com/package/vue-lazyload#intersectionobserver>


<>2.2 需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<template> <div> <!-- <img v-bind:src="img"> --> <img v-lazy="img"> </div> </
template> <script> export default { name: 'HelloWorld', data () { return { img:
'https://avatar.csdn.net/0/F/7/3_vbirdbest.jpg' } } } </script>


<>3. echarts

在vue中集成echarts可以通过两种方式集成：

* echarts
* vue-echarts
注意：echarts和vue-echarts 不要同时使用。
官方示例：https://echarts.baidu.com/examples/ <https://echarts.baidu.com/examples/>

1 安装echarts依赖
cnpm install echarts -S
* HelloWorld.vue <template> <div ref="chartOne" :style="{width: '300px',
height: '300px'}"></div> </template> <script> // 引入Echarts主模块 let echarts =
require('echarts/lib/echarts') // 引入柱状图 require('echarts/lib/chart/bar') //
引入圆饼图 require('echarts/lib/chart/pie') // 引入所需组件 require(
'echarts/lib/component/tooltip') require('echarts/lib/component/legend') export
default { name: 'Foo', // 创建图表一 methods: { createChartOne () { let chartOne =
echarts.init(this.$refs.chartOne) chartOne.setOption({ title: { text:
'在Vue中使用echarts' }, tooltip: {}, xAxis: { data: ['iOS', 'Vue', 'Java', 'GO'] },
yAxis: {}, series: [{ name: '热度', type: 'bar', data: [5, 6, 9, 6] }] }) } },
mounted () { this.createChartOne() } } </script>


<>4. vue-amap 高德地图

vue-amap是一套基于Vue 2.0和高德地图的地图组件。
官方文档 https://elemefe.github.io/vue-amap <https://elemefe.github.io/vue-amap>
,具体使用方法可以参考node_modules/vue-amap/README.md 文档中有详细使用方法。

相关文章 https://www.jianshu.com/p/bde9526ad756
<https://www.jianshu.com/p/bde9526ad756>

<>5. moment.js

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

* 安装 cnpm install moment --save
* 在使用的组件中导入 <template> <div> {{ new Date() | dateFrm}} </div> </template> <
script> import moment from 'moment' export default { name: 'HelloWorld', filters
: { dateFrm: function (value) { return moment(value).format('YYYY-MM-DD
HH:mm:ss') } } } </script>

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

格式代码说明返回值例子
M数字表示的月份，没有前导零1到12
MM数字表示的月份，有前导零01到12
MMM三个字母缩写表示的月份Jan到Dec
MMMM月份，完整的文本格式January到December
Q季度1到4
D月份中的第几天，没有前导零1到31
DD月份中的第几天，有前导零01到31
d星期中的第几天，数字表示0到6，0表示周日，6表示周六
ddd三个字母表示星期中的第几天Sun到Sat
dddd星期几，完整的星期文本从Sunday到Saturday
w年份中的第几周如42：表示第42周
YYYY四位数字完整表示的年份如：2014 或 2000
YY两位数字表示的年份如：14 或 98
A大写的AM PMAM PM
a小写的am pmam pm
HH小时，24小时制，有前导零00到23
H小时，24小时制，无前导零0到23
hh小时，12小时制，有前导零00到12
h小时，12小时制，无前导零0到12
m没有前导零的分钟数0到59
mm有前导零的分钟数00到59
s没有前导零的秒数1到59
ss有前导零的描述01到59
XUnix时间戳1411572969
<>6. utility

GitHub地址：https://github.com/node-modules/utility
<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
<>7. 工具类 util

一个小工具类。
http://nodejs.org/api/util.html <http://nodejs.org/api/util.html>

安装
cnpm install util
使用
import util from 'util' util.format('%s:%s', 'foo', 'bar')

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

实用工具方法：
// 生产环境下禁止输出日志 debugLog (str) { if (process.env.NODE_ENV !== 'production') {
console.log(str) } }
<>8. nprogress 页面顶部进度条

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

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

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

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

<>1. 安装
cnpm install --save nprogress
<>2. 在main.js中导入
import NProgress from 'nprogress' import 'nprogress/nprogress.css' //
配置NProgress选项 // NProgress.configure({ }) // 在路由页面跳转使用 router.beforeEach((to,
from, next) => { // 开始进度条 NProgress.start() // 继续路由 next() }) router.afterEach(
transition=> { // 结束进度条 NProgress.done() })
<>3. HelloWorld.vue
<template> <div> <router-link to="/foo">Go to Foo</router-link> </div> </
template>
Foo.vue
<template> <div> Foo Vue </div> </template>

• « 上一篇：大公司还是小公司？
• » 下一篇：家属感言：选择程序员，就是选择一种生活