Vue.js第三方常用插件

1. Vue.js devtools

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

2. 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
    preLoadproportion of pre-loading height(预加载高度比例)1.3Number
    errorsrc of the image upon load fail(图片路径错误时加载图片)'data-src'String
    loadingsrc of the image while loading(预加载图片)'data-src'String
    attemptattempts count(尝试加载图片数量)3Number
    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
    filterthe image's listener filter(动态修改图片地址路径){ }Image listener filter
    lazyComponentlazyload componentfalseLazy Component
    dispatchEventtrigger the dom eventfalseBoolean
    throttleWaitthrottle wait200Number
    observeruse IntersectionObserverfalseBoolean
    observerOptionsIntersectionObserver 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
    
     
     
    1. 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/

    1. 安装
    cnpm install moment --save
    
    1. 在使用的组件中导入
    <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

    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>
    

    在这里插入图片描述

    9.vue骨架屏

    vue-content-loader

    转载地址: https://blog.csdn.net/vbirdbest/article/details/86527886

    • 4
      点赞
    • 14
      收藏
      觉得还不错? 一键收藏
    • 0
      评论
    评论
    添加红包

    请填写红包祝福语或标题

    红包个数最小为10个

    红包金额最低5元

    当前余额3.43前往充值 >
    需支付:10.00
    成就一亿技术人!
    领取后你会自动成为博主和红包主的粉丝 规则
    hope_wisdom
    发出的红包
    实付
    使用余额支付
    点击重新获取
    扫码支付
    钱包余额 0

    抵扣说明:

    1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
    2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

    余额充值