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

每个项目产品都会让你加埋点，你是愿意花几天一个个加，还是愿意几分钟一个小时加完去喝茶聊天？来试试这520web工具, 高效加埋点，目前我们公司100号前端都在用，因为很好用，所以很自然普及开来了，推荐给大家吧

http://www.520webtool.com/

自己开发所以免费，埋点越多越能节约时间，点两下埋点就加上了，还不会犯错，里面有使用视频，反正免费 😄

1. Vue.js devtools

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

2. vue-lazyload 图片懒加载
插件地址：https://github.com/hilongjw/vue-lazyload
demo：http://hilongjw.github.io/vue-lazyload/
2.1 安装 和 使用插件
cnpm install vue-lazyload --save
1
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
})

key    description    default    options
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
adapter    
dynamically modify the attribute of element

（动态修改元素属性）

{ }    Element Adapter
filter    the image's listener filter（动态修改图片地址路径）    { }    Image listener filter
lazyComponent    lazyload component    false    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

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/

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 ,具体使用方法可以参考node_modules/vue-amap/README.md 文档中有详细使用方法。

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

5. moment.js
moment.js 日期处理类库。中文网站： 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 PM    AM PM
a    小写的am pm    am 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
X    Unix时间戳    1411572969
6. 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
7. 工具类 util
一个小工具类。
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

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>

--------------------- 
作者：vbirdbest 
来源：CSDN 
原文：https://blog.csdn.net/vbirdbest/article/details/86527886 
版权声明：本文为博主原创文章，转载请附上博文链接！