vue項目中添加百度統計

給你們推薦一款很是好用的插件：
vue-ba
githib: https://github.com/minlingcha...

1. 安裝

npm install vue-ba --save-dev

2. 引入

在main.js文件添加

import ba from 'vue-ba'

/**
*  一、使用方法： Vue.use(ba, 'YOUR_SITEID_HERE')
*  二、或者： Vue.use(ba, options)
*/
Vue.use(ba, {
    siteId: '175015a6227dca437e13abb9a6e845ac'
});

關於options配置：

參數	必須	默認	說明	備註
siteId	是		綁定要接受API請求的統計代碼
debug	否	false	調試模式下將在控制檯中輸出調用window._hmt時傳遞的參數	請不要在生產環境中使用，避免形成安全隱患
src	否	https://hm.baidu.com/hm.js?SI...	指定統計腳本標籤的 src 屬性

3. template中使用

3.1 trackEvent

用於發送頁面上按鈕等交互元素被觸發時的事件統計請求。

this.$ba.trackEvent(category, action, opt_label, opt_value)

參數	必須	類型	說明
category	是	string	表示事件發生在誰身上
action	是	string	表示訪客跟元素交互的行爲動做
opt_label	否	string	用於更詳細的描述事件
opt_value	否	int	用於填寫打分型事件的分值，加載時間型事件的時長，若是填寫爲其餘形式，系統將按0處理。若填寫爲浮點小數，系統會自動取整，去掉小數點。

3.2 trackPageview

用於發送某個URL的PV統計請求，適用於統計AJAX、異步加載頁面，友情連接，下載連接的流量

this.$ba.trackPageview(pageURL)

參數	必須	類型	說明
pageURL	是	string	自定義虛擬PV頁面的URL地址，填寫以斜槓‘/’開頭的相對路徑，系統會自動補全域名

3.3 ba 指令

vue-ba 提供 track-event，track-pageview 兩個指令，開發者能夠直接在 html 模版中使用來統計網站數據

• track-event
  使用指令 v-track-event 監聽事件， 經過 modifiers 指定事件類型，將自動爲綁定元素添加事件監聽，當事件觸發調用統計代碼。 如不指定事件，默認監聽 click 事件。
  可經過逗號分隔的字符串或對象字面量傳遞參數，以字符串傳遞時請注意參數順序，可參考trackEvent API。
  統計自定義事件使用 v-track-event.someEvent:custom

  <button v-track-event.click="'category, action''"></button> // 統計click事件
  
  <button v-track-event="'category, action'"></button> // 統計click事件簡寫
  
  <input v-track-event.keypress="'category, action'"> // 統計keypress事件
  
  <input v-track-event.someEvent:custom="'category, action'"> // 統計someEvent事件,someEvent是自定義事件
  
  <button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串傳遞參數
  
  <button v-track-event="{category:'event', action:'click'}"></button> // 以對象字面量傳遞參數

• track-pageview
  使用指令 track-pageview 統計虛擬 PV ，通常能夠配合 v-show 或 v-if 來統計局部動態視圖的 PV。
  可經過逗號分隔的字符串或對象字面量傳遞參數，以字符串傳遞時請注意參數順序，可參考trackPageview API 用法

  <div v-show="show" v-track-pageview="'/bar'">bar</div> //  跟蹤 v-show 綁定元素的虛擬pv
  
  <div v-if="show" v-track-pageview="'/foo'">foo</div> // 跟蹤 v-if 綁定元素的虛擬pv
  
  <div v-track-pageview="'/tar'"></div> // 以字符串指定受訪頁面和來源
  
  <div v-track-pageview="{pageURL:'/zoo''}"></div> // 以對象字面量指定受訪頁面和來源

參考連接：
一、 https://www.jb51.net/article/...