Vue.js最常用的第三方插件

1. Vue.js devtools

用於開發調試Vue.js的一個必備插件。可以在Chrome中的擴展程序中直接安裝，也可以本地文件的方式安裝。

2. nprogress頁面頂部進度條

當路由切換事會在瀏覽器的頂部出現一個藍色進度條用於表示路由切換的進度，並在又上角有個藍色loading的動畫。

一般情況下切換到目標路由時，在目標路由中的生命周期中可能會做一些處理（如請求接口等），這些操作會有一定的耗時，所以使用進度條來表示路由切換的進度。

CSDN在切換路由時會有這種效果。只不過CSDN的進度條是紅色的，右上角沒有加載。

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>

足球

<template>
 <div>
 Foo Vue
 </div>
</template>

3. echarts

在vue中集成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-lazyload圖片懶加載

插件地址：https：//github.com/hilongjw/vue-lazyload

演示：http：//hilongjw.github.io/vue-lazyload/

2.1安裝和使用插件

cnpm install vue-lazyload --save

src / main.js導入導入並使用插件

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>

5.導出excel

1.安裝組件文件保存器，xlsx，xlsx樣式，腳本加載器

cnpm install -S file-saver xlsx xlsx-style
cnpm install -D script-loader

2.在src下創建供應商文件夾，並創建Blob.js和Export2Excel.js兩個文件

Blob.js文件地址：https：//github.com/eligrey/Blob.js

Export2Excel.js文件內容請從這里獲取https://blog.csdn.net/vbirdbest/article/details/86527886

3.在webpack.base.conf.js中配置別名

在alias中增加vendor別名

resolve: {
 extensions: ['.js', '.vue', '.json'],
 alias: {
 'vue$': 'vue/dist/vue.esm.js',
 'vendor': path.resolve(__dirname, '../src/vendor'),
 '@': resolve('src'),
 }
},

4.在組件中使用

<template>
 <div>
 <el-table :data="tableData" :header-cell-style="{'text-align':'center'}" border>
 <el-table-column prop="name" label="姓名">
 </el-table-column>
 <el-table-column label="理科">
 <el-table-column prop="physics" label="物理"/>
 <el-table-column prop="chemistry" label="化學"/>
 <el-table-column prop="biology" label="生物"/>
 </el-table-column>
 </el-table>
 <button @click="handleDownload">導出</button>
 </div>
</template>
<script>
export default {
 name: 'ExcelExportExample',
 data () {
 return {
 tableData: [
 {
 name: '張三',
 physics: 88,
 chemistry: 99,
 biology: 66
 },
 {
 name: '李四',
 physics: 88.5,
 chemistry: 99.5,
 biology: 66.5
 }
 ]
 }
 },
 methods: {
 handleDownload () {
 import('@/vendor/Export2Excel').then(excel => {
 const list = this.tableData
 const props = ['name', 'physics', 'chemistry', 'biology']
 let multiHeader = [['姓名', '理科', '', '']]
 let header = ['', '物理', '化學', '生物']
 // s表示start，指定開始的行r和列c
 // e表示end，指定結束的行r和列c
 let merges = [
 // 理科合並單元格
 {
 s: {c: 1, r: 0},
 e: {c: 3, r: 0}
 },
 // 姓名
 {
 s: {c: 0, r: 0},
 e: {c: 0, r: 1}
 }
 ]
 const data = list.map(v => props.map(j => v[j]))
 excel.export_json_to_excel({
 multiHeader: multiHeader,
 merges: merges,
 header: header,
 data: data,
 filename: '學生成績表',
 autoWidth: true,
 bookType: 'xlsx'
 })
 })
 }
 }
}
</script>

注意：

• 可以通過xlsx-style來指定單元格的樣式，例如居中，單元格顏色等
• 可以通過merges屬性來合並單元格，合並單元格時需要將數據平鋪開來

6.引入excel

引入只需要安裝xlsx插件

npm install xlsx --save
ExcelImportExample.vue
<template>
 <div>
 <input type="file" @change="importFile(this)" id="imFile" style="display: none"
 accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"/>
 <el-button @click="uploadFile()">導入</el-button>
 <div>{{excelData}}</div>
 </div>
</template>
<script>
// 引入xlsx
var XLSX = require('xlsx')
export default {
 name: 'ExcelImportExample',
 data () {
 return {
 imFile: '',
 excelData: []
 }
 },
 mounted () {
 this.imFile = document.getElementById('imFile')
 },
 methods: {
 uploadFile: function () { // 點擊導入按鈕
 this.imFile.click()
 },
 importFile: function () { // 導入excel
 let obj = this.imFile
 if (!obj.files) {
 return
 }
 var f = obj.files[0]
 var reader = new FileReader()
 let $t = this
 reader.onload = function (e) {
 var data = e.target.result
 if ($t.rABS) {
 $t.wb = XLSX.read(btoa(this.fixdata(data)), { // 手動轉化
 type: 'base64'
 })
 } else {
 $t.wb = XLSX.read(data, {
 type: 'binary'
 })
 }
 let json = XLSX.utils.sheet_to_json($t.wb.Sheets[$t.wb.SheetNames[0]])
 console.log(typeof json)
 $t.dealFile($t.analyzeData(json)) // analyzeData: 解析導入數據
 }
 if (this.rABS) {
 reader.readAsArrayBuffer(f)
 } else {
 reader.readAsBinaryString(f)
 }
 },
 analyzeData: function (data) {
 // 此處可以解析導入數據
 return data
 },
 dealFile: function (data) {
 // 處理導入的數據
 console.log(data)
 this.imFile.value = ''
 if (data.length <= 0) {
 console.log('數據錯誤')
 } else {
 this.excelData = data
 }
 },
 // 文件流轉BinaryString
 fixdata: function (data) {
 var o = ''
 var l = 0
 var w = 10240
 for (; l < data.byteLength / w; ++l) {
 o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w, l * w + w)))
 }
 o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w)))
 return o
 }
 }
}
</script>

7. 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）中的格式不太一樣。