9、Vue 第三方插件

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

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
})

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依賴

npm install echars --save

(2)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)中的格式不太一樣。

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
• 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>