Vue.js第三方经常使用插件

时间 2019-12-05 标签 vue.js vue 第三方经常使用插件

1. Vue.js devtools

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

2. vue-lazyload 图片懒加载

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

2.1 安装和使用插件

 
 
 
 
 
 
 
 
 
 
cnpm install vue-lazyload --save

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

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 forhtml （想要监听的vue事件）vue 默认['scroll']能够省略，java 当插件跟页面中的动画或过渡等事件有冲突是，node 能够尝试其余选项git	`['scroll'（默认）,`github `'wheel',`web `'mousewheel',`shell `'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>

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 文档中有详细使用方法。

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>

转载地址： http://www.javashuo.com/article/p-oqgvecip-ep.html