Merge pull request #3 from chengpeiquan/develop

Develop

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -3,7 +3,7 @@ vue-baidu-analytics 使用说明
 
 基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
 
-注意：本插件在 `1.0.0` 版本的部分参数和api现在有所弃用，请按照当前最新文档说明使用新版本，或者安装以前的 `1.0.0` 旧版本使用。
+> @v2.0版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
 
 ## 功能
 
@@ -17,11 +17,29 @@ vue-baidu-analytics 使用说明
 
 * 支持手动提交事件分析上报
 
+* 自动识别Vue版本，自动适配Vue 2.0/3.0使用（插件2.0版本新增）
+
 ## 预览
 
 demo已开启debug模式，可开启控制台查看上报情况。
 
-点击预览：[vue-baidu-analytics demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/ "vue-baidu-analytics demo")
+Vue 2.0 版本：[vue-baidu-analytics demo for Vue 2.x](https://chengpeiquan.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
+
+Vue 3.0 版本：[vue-baidu-analytics demo for Vue 3.x](https://chengpeiquan.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
+
+## 安装
+
+方式一：通过npm安装
+
+```
+npm install vue-baidu-analytics --save-dev
+```
+
+方式二：通过cdn安装
+
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
+```
 
 ## 参数
 
@@ -31,20 +49,6 @@ router|是|object|Vue Router，本插件基于路由使用
 siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
 isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
 
-## 安装
-
-### 通过npm安装
-
-```
-npm install vue-baidu-analytics --save-dev
-```
-
-### 通过cdn安装
-
-```html
-<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
-```
-
 ## 使用
 
 通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
@@ -53,10 +57,14 @@ npm install vue-baidu-analytics --save-dev
 import baiduAnalytics from 'vue-baidu-analytics'
 ```
 
-安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
+安装插件后，在 `main.js` 引入以下代码（注意区分Vue2.0和Vue3.0的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
 
 后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
 
+### 在 Vue 2.0 里使用
+
+可参考demo：[main.js - Vue 2.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
+
 ```js
 Vue.use(baiduAnalytics, {
   router: router,
@@ -69,6 +77,33 @@ Vue.use(baiduAnalytics, {
 });
 ```
 
+### 在 Vue 3.0 里使用
+
+可参考demo：[main.js - Vue 3.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
+
+```js
+/** 
+ * 初始化Vue
+ */
+createApp(app)
+  // 启动路由
+  .use(router)
+
+  // 启动插件
+  .use(baiduAnalytics, {
+    router: router,
+    siteIdList: [
+      'aaaaaaaaaaaaaaaaaaa',
+      'bbbbbbbbbbbbbbbbbbb',
+      'ccccccccccccccccccc'
+    ],
+    isDebug: true
+  })
+  
+  // 挂载到节点上
+  .mount('#app');
+```
+
 可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
 
 ## 方法
@@ -91,17 +126,20 @@ pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<b
 
 **使用示范**
 
-在template里使用
+在 Vue 2.0 里使用
-
-```html
-<button @click="$pushBAIDU.pv('/test')">手动上报PV</button>
-```
-
-在method里使用
 
 ```js
-// this是Vue实例
+this.$pushBAIDU.pv(this.pageUrl);
-this.$pushBAIDU.pv('/home');
+```
+
+在 Vue 3.0 里使用
+
+（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
+
+```js
+const { proxy } = getCurrentInstance();
+
+proxy.$pushBAIDU.pv(pageUrl.value);
 ```
 
 ### 手动上报事件分析
@@ -121,15 +159,28 @@ value|否|number|该事件的分值，默认0
 
 **使用示范**
 
-在template里使用（比如：点击了一个id为123的首页banner）
+在 Vue 2.0 里使用
-
-```html
-<button @click="$pushBAIDU.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
-```
-
-在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
 
 ```js
-// this是Vue实例
+this.$pushBAIDU.event(
-this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
+  this.category,
+  this.action,
+  this.label,
+  this.value
+);
+```
+
+在 Vue 3.0 里使用
+
+（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
+
+```js
+const { proxy } = getCurrentInstance();
+
+proxy.$pushBAIDU.event(
+  category.value,
+  action.value,
+  label.value,
+  value.value
+);
 ```

demo/css/style.css

@@ -0,0 +1,60 @@
+#app,
+.section {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: center;
+}
+.section {
+  margin-bottom: 40px;
+}
+.title {
+  font-size: 40px;
+  color: #000;
+}
+.link {
+  color: #666;
+  text-decoration: none;
+}
+.link:hover {
+  color: #000;
+}
+.nav {
+  margin-bottom: 20px;
+}
+.nav .item {
+  color: #666;
+  margin: 0 10px 20px;
+}
+.nav .cur {
+  color: #000;
+  font-weight: bold;
+}
+.label {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-bottom: 20px;
+}
+.text {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  width: 60px;
+  font-size: 14px;
+  color: #333;
+  margin-right: 20px;
+}
+.input {
+  display: flex;
+  align-items: center;
+  width: 240px;
+  height: 40px;
+  font-size: 14px;
+  box-sizing: border-box;
+  padding: 0 10px;
+}
+.button {
+  padding: 5px 20px;
+  cursor: pointer;
+}

demo/js/main-for-vue2.js

@@ -0,0 +1,56 @@
+/** 
+ * 初始化路由
+ * routes是来自 js/routes.js 里面的配置
+ */
+const router = new VueRouter({
+  routes,
+  linkActiveClass: 'cur',
+  linkExactActiveClass: 'cur'
+});
+
+
+/** 
+ * 引入统计插件
+ */
+Vue.use(baiduAnalytics, {
+  router: router,
+  siteIdList: [
+    'aaaaaaaaaaaaaaaaaaa',
+    'bbbbbbbbbbbbbbbbbbb',
+    'ccccccccccccccccccc'
+  ],
+  isDebug: true
+});
+
+
+/** 
+ * 初始化Vue
+ */
+const app = new Vue({
+  el: '#app',
+  router,
+  data () {
+    return {
+      pageUrl: '',
+      category: '',
+      action: '',
+      label: '',
+      value: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    pv () {
+      this.$pushBAIDU.pv(this.pageUrl);
+    },
+    event () {
+      this.$pushBAIDU.event(
+        this.category,
+        this.action,
+        this.label,
+        this.value
+      );
+    }
+  }
+});

demo/js/main-for-vue3.js

@@ -0,0 +1,86 @@
+/** 
+ * 导入需要用到的组件
+ */
+const { createRouter, createWebHashHistory } = VueRouter;
+const { createApp, getCurrentInstance, ref } = Vue;
+
+
+/** 
+ * 初始化路由
+ * routes是来自 js/routes.js 里面的配置
+ */
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes,
+  linkActiveClass: 'cur',
+  linkExactActiveClass: 'cur'
+});
+
+
+/** 
+ * 创建实例
+ */
+const app = {
+  setup () {
+    // 插件要用到的一个代理组件
+    const { proxy } = getCurrentInstance();
+
+    // 初始化要用到的数据
+    const pageUrl = ref('');
+    const category = ref('');
+    const action = ref('');
+    const label = ref('');
+    const value = ref('');
+
+    // 提交pv的操作
+    const pv = () => {
+      proxy.$pushBAIDU.pv(pageUrl.value);
+    }
+
+    // 提交事件的操作
+    const event = () => {
+      proxy.$pushBAIDU.event(
+        category.value,
+        action.value,
+        label.value,
+        value.value
+      );
+    }
+
+    // Vue 3.0 需要把模板要用到的东西 return 出去
+    return {
+      // 数据
+      pageUrl,
+      category,
+      action,
+      label,
+      value,
+
+      // 方法
+      pv,
+      event
+    }
+  }
+};
+
+
+/** 
+ * 初始化Vue
+ */
+createApp(app)
+  // 启动路由
+  .use(router)
+
+  // 启动插件
+  .use(baiduAnalytics, {
+    router: router,
+    siteIdList: [
+      'aaaaaaaaaaaaaaaaaaa',
+      'bbbbbbbbbbbbbbbbbbb',
+      'ccccccccccccccccccc'
+    ],
+    isDebug: true
+  })
+  
+  // 挂载到节点上
+  .mount('#app');

demo/js/main.js

@@ -1,68 +0,0 @@
-// 定义路由信息
-const routes = [
-  {
-    path: '/',
-    redirect: '/page1'
-  },
-  {
-    path: '/page1',
-    component: {
-      template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
-    }
-  },
-  {
-    path: '/page2',
-    component: {
-      template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
-    }
-  },
-  {
-    path: '/page3',
-    component: {
-      template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
-    }
-  }
-];
-
-// 初始化路由
-const router = new VueRouter({
-  routes,
-  linkActiveClass: 'cur',
-  linkExactActiveClass: 'cur'
-});
-
-// 引入统计插件
-Vue.use(baiduAnalytics, {
-  router: router,
-  siteIdList: [
-    'aaaaaaaaaaaaaaaaaaa',
-    'bbbbbbbbbbbbbbbbbbb',
-    'ccccccccccccccccccc'
-  ],
-  isDebug: true
-});
-
-// 初始化Vue
-const app = new Vue({
-  el: '#app',
-  router,
-  data () {
-    return {
-      pageUrl: '',
-      category: '',
-      action: '',
-      label: '',
-      value: ''
-    }
-  },
-  mounted () {
-  },
-  methods: {
-    pv () {
-      this.$pushBAIDU.pv(this.pageUrl);
-    },
-    event () {
-      this.$pushBAIDU.event(this.category, this.action, this.label, this.value);
-    }
-  }
-});

demo/js/routes.js

@@ -0,0 +1,27 @@
+/** 
+ * 定义路由信息
+ */
+const routes = [
+  {
+    path: '/',
+    redirect: '/page1'
+  },
+  {
+    path: '/page1',
+    component: {
+      template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
+    }
+  },
+  {
+    path: '/page2',
+    component: {
+      template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
+    }
+  },
+  {
+    path: '/page3',
+    component: {
+      template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
+    }
+  }
+];

demo/vue2.html

@@ -3,64 +3,19 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>vue baidu analytics demo</title>
+  <title>[Vue2] vue baidu analytics demo</title>
-  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/vue@2"></script>
-  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
+  <script src="https://unpkg.com/vue-router@3"></script>
-  <style>
+  <link rel="stylesheet" href="css/style.css">
-    #app,
-    .section {
-      display: flex;
-      flex-direction: column;
-      justify-content: flex-start;
-      align-items: center;
-    }
-    .section {
-      margin-bottom: 40px;
-    }
-    .nav {
-      margin-bottom: 20px;
-    }
-    .nav .item {
-      color: #666;
-      margin: 0 10px 20px;
-    }
-    .nav .cur {
-      color: #000;
-      font-weight: bold;
-    }
-    .label {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      margin-bottom: 20px;
-    }
-    .text {
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      width: 60px;
-      font-size: 14px;
-      margin-right: 20px;
-    }
-    .input {
-      display: flex;
-      align-items: center;
-      width: 240px;
-      height: 40px;
-      font-size: 14px;
-      box-sizing: border-box;
-      padding: 0 10px;
-    }
-    .button {
-      padding: 5px 20px;
-      cursor: pointer;
-    }
-  </style>
 </head>
 <body>
 
   <div id="app">
-    <h1>Hello App!</h1>
+
+    <section class="section">
+      <h1 class="title">Hello Vue2 App!</h1>
+      <a href="./vue3.html" class="link">[ 切换到vue3 ]</a>
+    </section>
 
     <section class="section">
       <h2>切换路由自动上报测试</h2>
@@ -104,7 +59,8 @@
   </div>
 
   <script src="../dist/vue-baidu-analytics.js"></script>
-  <script src="js/main.js"></script>
+  <script src="js/routes.js"></script>
+  <script src="js/main-for-vue2.js"></script>
   
 </body>
 </html>

demo/vue3.html

@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>[Vue3] vue baidu analytics demo</title>
+  <script src="https://unpkg.com/vue@3"></script>
+  <script src="https://unpkg.com/vue-router@4"></script>
+  <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+  <div id="app">
+
+    <section class="section">
+      <h1 class="title">Hello Vue3 App!</h1>
+      <a href="./vue2.html" class="link">[ 切换到vue2 ]</a>
+    </section>
+
+    <section class="section">
+      <h2>切换路由自动上报测试</h2>
+      <div class="nav">
+        <router-link class="item" to="/page1" exact>Go to Page1</router-link>
+        <router-link class="item" to="/page2">Go to Page2</router-link>
+        <router-link class="item" to="/page3">Go to Page3</router-link>
+      </div>
+      <router-view></router-view>
+    </section>
+
+    <section class="section">
+      <h2>提交pv测试</h2>
+      <label class="label">
+        <span class="text">pageUrl</span>
+        <input class="input" type="text" placeholder="输入页面的url" v-model="pageUrl">
+      </label>
+      <button class="button" @click="pv">提交一个pv</button>
+    </section>
+
+    <section class="section">
+      <h2>提交event测试</h2>
+      <label class="label">
+        <span class="text">category</span>
+        <input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
+      </label>
+      <label class="label">
+        <span class="text">action</span>
+        <input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
+      </label>
+      <label class="label">
+        <span class="text">label</span>
+        <input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
+      </label>
+      <label class="label">
+        <span class="text">value</span>
+        <input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
+      </label>
+      <button class="button" @click="event">提交一个event</button>
+    </section>
+  </div>
+
+  <script src="../dist/vue-baidu-analytics.js"></script>
+  <script src="js/routes.js"></script>
+  <script src="js/main-for-vue3.js"></script>
+  
+</body>
+</html>

dist/modules/getVueVersion.d.ts

@@ -0,0 +1,2 @@
+declare const getVueVersion: (Vue: Vue) => number;
+export default getVueVersion;

dist/vue-baidu-analytics.js

@@ -1,6 +1,6 @@
 /** 
  * name: vue-baidu-analytics
- * version: v1.1.0
+ * version: v2.0.0
  * author: chengpeiquan
  */
  (function (global, factory) {
@@ -92,6 +92,18 @@
       return PushBAIDU;
   }());
 
+  var getVueVersion = function (Vue) {
+      var version = 2;
+      var VUE_VERSION = String(Vue.version);
+      if (VUE_VERSION.slice(0, 2) === '2.') {
+          version = 2;
+      }
+      if (VUE_VERSION.slice(0, 2) === '3.') {
+          version = 3;
+      }
+      return version;
+  };
+
   function install(Vue, _a) {
       var router = _a.router, siteIdList = _a.siteIdList, _b = _a.isDebug, isDebug = _b === void 0 ? false : _b;
       if (typeof document === 'undefined' || typeof window === 'undefined') {
@@ -104,7 +116,13 @@
           throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
       }
       var pushBAIDU = new PushBAIDU(siteIdList, isDebug);
+      var VUE_VERSION = getVueVersion(Vue) || 2;
+      if (VUE_VERSION === 2) {
           Vue.prototype.$pushBAIDU = pushBAIDU;
+      }
+      if (VUE_VERSION === 3) {
+          Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+      }
       if (siteIdList) {
           pushBAIDU.init();
       }

dist/vue-baidu-analytics.min.js

@@ -1,7 +1,7 @@
 /** 
  * name: vue-baidu-analytics
- * version: v1.1.0
+ * version: v2.0.0
  * author: chengpeiquan
  */
- !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId:    "+this.siteId+"\npageUrl:   "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId:   "+this.siteId+"\ncategory: "+t+"\naction:   "+i+"\nlabel:    "+e+"\nvalue:    "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(a){new t(a,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,a=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var u=new i(o,a);t.prototype.$pushBAIDU=u,o&&u.init(),n.afterEach((function(t){var i=window.location.pathname.split("/").length,e=window.location.pathname.split("/").slice(0,i-1).join("/"),o="hash"===n.mode?e+"/#"+t.fullPath:""+e+t.fullPath;u.pv(o)}))}}));
+ !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t="undefined"!=typeof globalThis?globalThis:t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId:    "+this.siteId+"\npageUrl:   "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId:   "+this.siteId+"\ncategory: "+t+"\naction:   "+i+"\nlabel:    "+e+"\nvalue:    "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(a){new t(a,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,a=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var r=new i(o,a),u=function(t){var i=2,e=String(t.version);return"2."===e.slice(0,2)&&(i=2),"3."===e.slice(0,2)&&(i=3),i}(t)||2;2===u&&(t.prototype.$pushBAIDU=r),3===u&&(t.config.globalProperties.$pushBAIDU=r),o&&r.init(),n.afterEach((function(t){var i=window.location.pathname.split("/").length,e=window.location.pathname.split("/").slice(0,i-1).join("/"),o="hash"===n.mode?e+"/#"+t.fullPath:""+e+t.fullPath;r.pv(o)}))}}));
 //# sourceMappingURL=vue-baidu-analytics.min.js.map

package.json

@@ -1,8 +1,9 @@
 {
   "name": "vue-baidu-analytics",
-  "version": "1.1.0",
+  "version": "2.0.0",
   "description": "A data collection tool that supports reporting of single-page application data built by Vue-cli, based on baidu statistics.",
   "main": "dist/vue-baidu-analytics.min.js",
+  "types": "vue-baidu-analytics.d.ts",
   "scripts": {
     "build": "rollup -c rollup.config.ts"
   },

src/global.d.ts

@@ -14,6 +14,8 @@ declare global {
   interface Vue {
     prototype: any
     $pushBAIDU: PushBAIDU
+    version: number | string
+    config: any
   }
   
   interface To {

src/main.ts

@@ -1,5 +1,9 @@
 import PushBAIDU from '@m/pushBAIDU'
+import getVueVersion from '@m/getVueVersion'
 
+/** 
+ * 定义插件
+ */
 export default function install (Vue: Vue, { router, siteIdList, isDebug = false }: Partial<Options>) {
 
   /** 
@@ -20,8 +24,20 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
   /** 
    * 挂载推送的方法
    */
-  const pushBAIDU = new PushBAIDU(siteIdList, isDebug);
+  const pushBAIDU: any = new PushBAIDU(siteIdList, isDebug);
+  
+  // 获取Vue版本（获取失败则默认为2）
+  const VUE_VERSION: number = getVueVersion(Vue) || 2;
+
+  // 2.x可以直接挂载到原型上
+  if ( VUE_VERSION === 2 ) {
     Vue.prototype.$pushBAIDU = pushBAIDU;
+  }
+
+  // 3.x必须使用这个方式来挂载
+  if ( VUE_VERSION === 3 ) {
+    Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+  }
 
   /** 
    * 部署站点并初始化

src/modules/getVueVersion.ts

@@ -0,0 +1,24 @@
+/** 
+ * 获取Vue的版本
+ * @return 2=Vue2.x, 3=Vue3.x
+ */
+const getVueVersion = (Vue: Vue): number => {
+  let version: number = 2;
+
+  // 获取Vue的版本号
+  const VUE_VERSION: string = String(Vue.version);
+
+  // Vue 2.x
+  if ( VUE_VERSION.slice(0, 2) === '2.' ) {
+    version = 2; 
+  }
+  
+  // Vue 3.x
+  if ( VUE_VERSION.slice(0, 2) === '3.' ) {
+    version = 3; 
+  }
+  
+  return version;
+}
+
+export default getVueVersion;

vue-baidu-analytics.d.ts

@@ -0,0 +1 @@
+declare module 'vue-baidu-analytics'