关于javascript:vue项目中添加百度统计

给大家举荐一款十分好用的插件：
vue-ba
githib: https://github.com/minlingcha…

1. 装置

npm install vue-ba –save-dev

2. 引入

在 main.js 文件增加

import ba from 'vue-ba'

/**
*  1、应用办法：Vue.use(ba, 'YOUR_SITEID_HERE')
*  2、或者：Vue.use(ba, options)
*/
Vue.use(ba, {siteId: '175015a6227dca437e13abb9a6e845ac'});

对于 options 配置：

3. template 中应用

3.1 trackEvent

用于发送页面上按钮等交互元素被触发时的事件统计申请。

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

3.2 trackPageview

用于发送某个 URL 的 PV 统计申请，实用于统计 AJAX、异步加载页面，友情链接，下载链接的流量

this.$ba.trackPageview(pageURL)

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> // 以对象字面量指定受访页面和起源 

参考链接：
1、https://www.jb51.net/article/…