Release v2.1.0

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  plugins: [
+    '@typescript-eslint'
+  ],
+  rules: {}
+};

README.md

@@ -1,9 +1,9 @@
 vue-baidu-analytics 使用说明
 ===
 
-基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面`，以及 `VuePress` 项目上使用，使用本插件的项目需要引入 `Vue Router`。
+基于 Vue 开发的百度统计插件，可以在 `Vue-CLI 脚手架项目` 或者 `引入了 Vue 相关 CDN 的普通页面`，以及 `VuePress` 项目上使用，使用本插件的项目需要引入 `Vue Router`。
 
-> @v2.0版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
+> v2.0 版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对 Vue 3.0 感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
 
 ## 功能
 
@@ -29,13 +29,13 @@ Vue 3.0 版本：[vue-baidu-analytics demo for Vue 3.x](https://chengpeiquan.git
 
 ## 安装
 
-方式一：通过npm安装
+方式一：通过 NPM 安装
 
 ```
 npm install vue-baidu-analytics --save-dev
 ```
 
-方式二：通过cdn安装
+方式二：通过 CDN 安装
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
@@ -46,20 +46,20 @@ npm install vue-baidu-analytics --save-dev
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
 router|是|object|Vue Router，本插件基于路由使用
-siteIdList|是|string[]|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+siteIdList|是|string[]|百度统计的站点 id 列表，item 为站点 id <br>只有一个站点需要上报就保留一个 item 即可
-isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
+isDebug|否|boolean|是否开启 debug 模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
 
 ## 使用
 
-通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
+通过 NPM 安装的项目，需要先在 `main.js` 里引入插件（通过 CDN 则无需该步骤）。
 
 ```js
 import baiduAnalytics from 'vue-baidu-analytics'
 ```
 
-安装插件后，在 `main.js` 引入以下代码（注意区分Vue2.0和Vue3.0的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
+安装插件后，在 `main.js` 引入以下代码（注意区分 Vue 2.0 和 Vue 3.0 的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
 
-后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
+后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
 
 ### 在 Vue 2.0 里使用
 
@@ -128,21 +128,21 @@ export default ({ Vue, router }) => {
 };
 ```
 
-可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
+可在开发环境打开 debug 模式了解相关的上报情况（上线前记得关闭 debug ）。
 
 ## 方法
 
-插件目前封装了两个常用的api，统一挂载到Vue实例上的 `$pushBAIDU` 去调用。
+插件目前封装了两个常用的 API ，统一挂载到 Vue 实例上的 `$pushBAIDU` 去调用。
 
-注：如果配置了多个站点id，会同时上报给所有站点。
+注：如果配置了多个站点 id ，会同时上报给所有站点。
 
-### 手动上报页面PV
+### 手动上报页面 PV
 
-api名称|功能说明
+API 名称|功能说明
 :-:|-
 pv|手动执行PV数据上报
 
-**api参数**
+**API 参数**
 
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
@@ -158,7 +158,7 @@ this.$pushBAIDU.pv(this.pageUrl);
 
 在 Vue 3.0 里使用
 
-（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
+（使用 3.0 的生命周期，需要遵循 Vue3 的规范，引入一个 Vue 自带的代理组件，并写在 `setup` 里执行）
 
 ```js
 const { proxy } = getCurrentInstance();
@@ -168,18 +168,18 @@ proxy.$pushBAIDU.pv(pageUrl.value);
 
 ### 手动上报事件分析
 
-api名称|功能说明
+API 名称|功能说明
 :-:|-
 event|手动执行事件分析数据上报
 
-**api参数**
+**API 参数**
 
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
 category|是|string|产生该事件的位置名称，比如 `首页banner`
 action|是|string|产生该事件的行为描述，比如 `点击`
-label|否|string|产生该事件的标签名称，可以用来记录事件子id，比如 `bannerId_123`，默认为空
+label|否|string|产生该事件的标签名称，可以用来记录事件子 id，比如 `bannerId_123`，默认为空
-value|否|number|该事件的分值，默认0
+value|否|number|该事件的分值，默认 0
 
 **使用示范**
 
@@ -196,7 +196,7 @@ this.$pushBAIDU.event(
 
 在 Vue 3.0 里使用
 
-（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
+（使用 3.0 的生命周期，需要遵循 Vue3 的规范，引入一个 Vue 自带的代理组件，并写在 `setup` 里执行）
 
 ```js
 const { proxy } = getCurrentInstance();
@@ -207,4 +207,4 @@ proxy.$pushBAIDU.event(
   label.value,
   value.value
 );
-```
+```

demo/js/main-for-vue2.js

@@ -1,4 +1,4 @@
-/** 
+/**
  * 初始化路由
  * routes是来自 js/routes.js 里面的配置
  */
@@ -9,21 +9,21 @@ const router = new VueRouter({
 });
 
 
-/** 
+/**
  * 引入统计插件
+ * @description 自 v2.1.0 版本开始，需要使用 .default 去激活插件
  */
-Vue.use(baiduAnalytics, {
+Vue.use(baiduAnalytics.default, {
   router: router,
   siteIdList: [
     'aaaaaaaaaaaaaaaaaaa',
-    'bbbbbbbbbbbbbbbbbbb',
+    'bbbbbbbbbbbbbbbbbbb'
-    'ccccccccccccccccccc'
   ],
   isDebug: true
 });
 
 
-/** 
+/**
  * 初始化Vue
  */
 const app = new Vue({
@@ -35,17 +35,43 @@ const app = new Vue({
       category: '',
       action: '',
       label: '',
-      value: ''
+      value: '',
+
+      // 也可以绑定一个钩子变量去使用
+      baidu: baiduAnalytics.usePush()
     }
   },
   mounted () {
+    this.baidu.pv('/use-push-api/?from=mounted');
   },
   methods: {
+    /**
+     * 提交 pv
+     * @description 支持两种推送方式
+     */
     pv () {
+      // 使用默认全局 API
       this.$pushBAIDU.pv(this.pageUrl);
+
+      // 使用钩子 API
+      // this.baidu.pv(this.pageUrl);
     },
+
+    /**
+     * 提交事件
+     * @description 支持两种推送方式
+     */
     event () {
-      this.$pushBAIDU.event(
+      // 使用默认全局 API
+      // this.$pushBAIDU.event(
+      //   this.category,
+      //   this.action,
+      //   this.label,
+      //   this.value
+      // );
+
+      // 使用钩子 API
+      this.baidu.event(
         this.category,
         this.action,
         this.label,
@@ -53,4 +79,4 @@ const app = new Vue({
       );
     }
   }
-});
+});

demo/js/main-for-vue3.js

@@ -1,11 +1,12 @@
-/** 
+/**
  * 导入需要用到的组件
  */
 const { createRouter, createWebHashHistory } = VueRouter;
 const { createApp, getCurrentInstance, ref } = Vue;
+const { usePush } = baiduAnalytics;
 
 
-/** 
+/**
  * 初始化路由
  * routes是来自 js/routes.js 里面的配置
  */
@@ -17,13 +18,22 @@ const router = createRouter({
 });
 
 
-/** 
+/**
  * 创建实例
  */
 const app = {
   setup () {
-    // 插件要用到的一个代理组件
+    /**
-    const { proxy } = getCurrentInstance();
+     * 新的推荐方式
+     * @description 创建一个钩子变量去使用，更适合于 TypeScript 项目
+     */
+    const baidu = usePush();
+
+    /**
+     * 原来的方式
+     * @description 用代理组件去操作，对 TS 项目不够友好
+     */
+    // const { proxy } = getCurrentInstance();
 
     // 初始化要用到的数据
     const pageUrl = ref('');
@@ -32,19 +42,38 @@ const app = {
     const label = ref('');
     const value = ref('');
 
-    // 提交pv的操作
+    /**
+     * 提交 pv
+     * @description 支持两种推送方式
+     */
     const pv = () => {
-      proxy.$pushBAIDU.pv(pageUrl.value);
+      // 通过钩子去操作
+      baidu.pv(pageUrl.value);
+
+      // 通过代理组件去操作
+      // proxy.$pushBAIDU.pv(pageUrl.value);
     }
 
-    // 提交事件的操作
+    /**
+     * 提交事件
+     * @description 支持两种推送方式
+     */
     const event = () => {
-      proxy.$pushBAIDU.event(
+      // 通过钩子去操作
+      baidu.event(
         category.value,
         action.value,
         label.value,
         value.value
       );
+
+      // 通过代理组件去操作
+      // proxy.$pushBAIDU.event(
+      //   category.value,
+      //   action.value,
+      //   label.value,
+      //   value.value
+      // );
     }
 
     // Vue 3.0 需要把模板要用到的东西 return 出去
@@ -64,7 +93,7 @@ const app = {
 };
 
 
-/** 
+/**
  * 初始化Vue
  */
 createApp(app)
@@ -72,15 +101,14 @@ createApp(app)
   .use(router)
 
   // 启动插件
-  .use(baiduAnalytics, {
+  .use(baiduAnalytics.default, {
     router: router,
     siteIdList: [
       'aaaaaaaaaaaaaaaaaaa',
-      'bbbbbbbbbbbbbbbbbbb',
+      'bbbbbbbbbbbbbbbbbbb'
-      'ccccccccccccccccccc'
     ],
     isDebug: true
   })
-  
+
   // 挂载到节点上
-  .mount('#app');
+  .mount('#app');

demo/vue2.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>[Vue2] vue baidu analytics demo</title>
-  <script src="https://unpkg.com/vue@2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-  <script src="https://unpkg.com/vue-router@3"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
 
@@ -59,8 +59,8 @@
   </div>
 
   <script src="../dist/vue-baidu-analytics.js"></script>
-  <script src="js/routes.js"></script>
+  <script src="./js/routes.js"></script>
-  <script src="js/main-for-vue2.js"></script>
+  <script src="./js/main-for-vue2.js"></script>
-  
+
 </body>
-</html>
+</html>

demo/vue3.html

@@ -4,9 +4,9 @@
   <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://cdn.jsdelivr.net/npm/vue@3"></script>
-  <script src="https://unpkg.com/vue-router@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@4"></script>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
 
@@ -59,8 +59,8 @@
   </div>
 
   <script src="../dist/vue-baidu-analytics.js"></script>
-  <script src="js/routes.js"></script>
+  <script src="./js/routes.js"></script>
-  <script src="js/main-for-vue3.js"></script>
+  <script src="./js/main-for-vue3.js"></script>
-  
+
 </body>
-</html>
+</html>

dist/main.d.ts

@@ -1 +1,16 @@
-export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): boolean;
+/**
+ * 暴露 Hooks
+ * @description 解决 Vue 3.0 使用全局变量很麻烦的问题
+ * @example
+ * import { usePush } from 'vue-baidu-analytics'
+ * const baidu = usePush();
+ * baidu.pv('/');
+ */
+export declare function usePush(): {
+    pv: (pageUrl: string) => void;
+    event: (category: string, action: string, label: string, value: number) => void;
+};
+/**
+ * 定义插件
+ */
+export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): false | undefined;

dist/modules/baidu.d.ts

@@ -1,10 +1,26 @@
+/**
+ * 定义基础配置
+ * 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
+ */
 declare class BAIDU {
     siteId: string;
     isDebug: boolean;
     constructor(siteId?: string, isDebug?: boolean);
+    /**
+     * 初始化
+     */
     init(): void;
+    /**
+     * 设置要响应的站点
+     */
     setAccount(): void;
+    /**
+     * 提交PV、UV
+     */
     trackPageview(pageUrl: string): void;
-    trackEvent(category: string, action: string, label: string, value: number): boolean;
+    /**
+     * 提交点击事件
+     */
+    trackEvent(category: string, action: string, label: string, value: number): void;
 }
 export default BAIDU;

dist/modules/getRouterMode.d.ts

@@ -1,2 +0,0 @@
-declare const getRouterMode: (vueVersion: number, router: any) => string;
-export default getRouterMode;

dist/modules/getVueVersion.d.ts

@@ -1,2 +1,6 @@
+/**
+ * 获取Vue的版本
+ * @return 2=Vue2.x, 3=Vue3.x
+ */
 declare const getVueVersion: (Vue: Vue) => number;
 export default getVueVersion;

dist/modules/pushBAIDU.d.ts

@@ -1,9 +1,21 @@
+/**
+ * 定义推送操作
+ */
 declare class PushBAIDU {
     siteIdList: string[];
     isDebug: boolean;
     constructor(siteIdList: string[], isDebug: boolean);
+    /**
+     * 批量部署站点
+     */
     init(): void;
+    /**
+     * 批量提交pv上报
+     */
     pv(pageUrl: string): void;
+    /**
+     * 批量提交事件上报
+     */
     event(category: string, action: string, label: string, value: number): void;
 }
 export default PushBAIDU;

dist/vue-baidu-analytics.js

@@ -1,138 +1,255 @@
-/** 
+/*!
  * name: vue-baidu-analytics
- * version: v2.0.3
+ * version: v2.1.0
  * author: chengpeiquan
  */
- (function (global, factory) {
+(function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(factory) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, global.baiduAnalytics = factory());
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.baiduAnalytics = {}));
-}(this, (function () { 'use strict';
+}(this, (function (exports) { 'use strict';
 
-  var BAIDU = (function () {
+    /*! *****************************************************************************
-      function BAIDU(siteId, isDebug) {
+    Copyright (c) Microsoft Corporation.
-          if (siteId === void 0) { siteId = ''; }
+
-          if (isDebug === void 0) { isDebug = false; }
+    Permission to use, copy, modify, and/or distribute this software for any
-          this.siteId = siteId;
+    purpose with or without fee is hereby granted.
-          this.isDebug = isDebug;
+
-      }
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-      BAIDU.prototype.init = function () {
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-          window._hmt = window._hmt ? window._hmt : [];
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-          var SCRIPT = document.createElement('script');
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-          SCRIPT['async'] = true;
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
-          SCRIPT['src'] = "https://hm.baidu.com/hm.js?" + this.siteId;
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-          document.querySelector('head').appendChild(SCRIPT);
+    PERFORMANCE OF THIS SOFTWARE.
-          if (this.isDebug) {
+    ***************************************************************************** */
-              console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    " + this.siteId);
+    function __spreadArray(to, from) {
-          }
+      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
-      };
-      BAIDU.prototype.setAccount = function () {
-          window._hmt.push(['_setAccount', this.siteId]);
-      };
-      BAIDU.prototype.trackPageview = function (pageUrl) {
-          if (!pageUrl || typeof pageUrl !== 'string') {
-              pageUrl = '/';
-          }
-          if (pageUrl.includes('http')) {
-              var PAGE_CUT = pageUrl.split('/');
-              var HOST_NAME = PAGE_CUT[0] + "//" + PAGE_CUT[2];
-              pageUrl = pageUrl.replace(HOST_NAME, '');
-          }
-          this.setAccount();
-          window._hmt.push(['_trackPageview', pageUrl]);
-          if (this.isDebug) {
-              console.log("[vue-baidu-analytics] track pv done.\nsiteId:    " + this.siteId + "\npageUrl:   " + pageUrl);
-          }
-      };
-      BAIDU.prototype.trackEvent = function (category, action, label, value) {
-          if (typeof category !== 'string' || typeof action !== 'string' || !category || !action) {
-              throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
-          }
-          if (!label || typeof label !== 'string') {
-              label = '';
-          }
-          if (!Number(value)) {
-              value = 1;
-          }
-          this.setAccount();
-          window._hmt.push(['_trackEvent', category, action, label, value]);
-          if (this.isDebug) {
-              console.log("[vue-baidu-analytics] track event done.\nsiteId:   " + this.siteId + "\ncategory: " + category + "\naction:   " + action + "\nlabel:    " + label + "\nvalue:    " + value);
-          }
-      };
-      return BAIDU;
-  }());
 
-  var PushBAIDU = (function () {
+      return to;
-      function PushBAIDU(siteIdList, isDebug) {
+    }
-          this.siteIdList = siteIdList;
-          this.isDebug = isDebug;
-      }
-      PushBAIDU.prototype.init = function () {
-          var _this = this;
-          this.siteIdList.forEach(function (siteId) {
-              var SITE = new BAIDU(siteId, _this.isDebug);
-              SITE.init();
-          });
-      };
-      PushBAIDU.prototype.pv = function (pageUrl) {
-          var _this = this;
-          this.siteIdList.forEach(function (siteId) {
-              var SITE = new BAIDU(siteId, _this.isDebug);
-              SITE.trackPageview(pageUrl);
-          });
-      };
-      PushBAIDU.prototype.event = function (category, action, label, value) {
-          var _this = this;
-          this.siteIdList.forEach(function (siteId) {
-              var SITE = new BAIDU(siteId, _this.isDebug);
-              SITE.trackEvent(category, action, label, value);
-          });
-      };
-      return PushBAIDU;
-  }());
 
-  var getVueVersion = function (Vue) {
+    /**
-      var version = 2;
+     * 定义基础配置
-      var VUE_VERSION = String(Vue.version);
+     * 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
-      if (VUE_VERSION.slice(0, 2) === '2.') {
+     */
-          version = 2;
+    var BAIDU = /** @class */ (function () {
-      }
+        function BAIDU(siteId, isDebug) {
-      if (VUE_VERSION.slice(0, 2) === '3.') {
+            if (siteId === void 0) { siteId = ''; }
-          version = 3;
+            if (isDebug === void 0) { isDebug = false; }
-      }
+            this.siteId = siteId;
-      return version;
+            this.isDebug = isDebug;
-  };
+        }
+        /**
+         * 初始化
+         */
+        BAIDU.prototype.init = function () {
+            var _a;
+            window._hmt = window._hmt ? window._hmt : [];
+            var SCRIPT = document.createElement('script');
+            SCRIPT['async'] = true;
+            SCRIPT['src'] = "https://hm.baidu.com/hm.js?" + this.siteId;
+            (_a = document.querySelector('head')) === null || _a === void 0 ? void 0 : _a.appendChild(SCRIPT);
+            if (this.isDebug) {
+                console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    " + this.siteId);
+            }
+        };
+        /**
+         * 设置要响应的站点
+         */
+        BAIDU.prototype.setAccount = function () {
+            window._hmt.push(['_setAccount', this.siteId]);
+        };
+        /**
+         * 提交PV、UV
+         */
+        BAIDU.prototype.trackPageview = function (pageUrl) {
+            // 如果页面链接没传或者无效链接，则默认为根域名
+            if (!pageUrl || typeof pageUrl !== 'string') {
+                pageUrl = '/';
+            }
+            // 如果页面链接带上了域名，则需要过滤掉
+            if (pageUrl.includes('http')) {
+                var PAGE_CUT = pageUrl.split('/');
+                var HOST_NAME = PAGE_CUT[0] + "//" + PAGE_CUT[2];
+                pageUrl = pageUrl.replace(HOST_NAME, '');
+            }
+            // 设置响应 id 并提交数据
+            this.setAccount();
+            window._hmt.push(['_trackPageview', pageUrl]);
+            if (this.isDebug) {
+                console.log("[vue-baidu-analytics] track pv done.\nsiteId:    " + this.siteId + "\npageUrl:   " + pageUrl);
+            }
+        };
+        /**
+         * 提交点击事件
+         */
+        BAIDU.prototype.trackEvent = function (category, action, label, value) {
+            // 前两个是必填项
+            if (typeof category !== 'string' || typeof action !== 'string' || !category || !action) {
+                throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
+            }
+            // 重置一些无效的默认值
+            if (!label || typeof label !== 'string') {
+                label = '';
+            }
+            if (!Number(value)) {
+                value = 1;
+            }
+            // 设置响应id并提交数据
+            this.setAccount();
+            window._hmt.push(['_trackEvent', category, action, label, value]);
+            if (this.isDebug) {
+                console.log("[vue-baidu-analytics] track event done.\nsiteId:   " + this.siteId + "\ncategory: " + category + "\naction:   " + action + "\nlabel:    " + label + "\nvalue:    " + value);
+            }
+        };
+        return BAIDU;
+    }());
 
-  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') {
+     */
-          return false;
+    var PushBAIDU = /** @class */ (function () {
-      }
+        function PushBAIDU(siteIdList, isDebug) {
-      if (!router) {
+            this.siteIdList = __spreadArray([], siteIdList);
-          throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
+            this.isDebug = isDebug;
-      }
+        }
-      if (!siteIdList) {
+        /**
-          throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
+         * 批量部署站点
-      }
+         */
-      var pushBAIDU = new PushBAIDU(siteIdList, isDebug);
+        PushBAIDU.prototype.init = function () {
-      var VUE_VERSION = getVueVersion(Vue) || 2;
+            var _this = this;
-      if (VUE_VERSION === 2) {
+            this.siteIdList.forEach(function (siteId) {
-          Vue.prototype.$pushBAIDU = pushBAIDU;
+                var SITE = new BAIDU(siteId, _this.isDebug);
-      }
+                SITE.init();
-      if (VUE_VERSION === 3) {
+            });
-          Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+        };
-      }
+        /**
-      if (siteIdList) {
+         * 批量提交pv上报
-          pushBAIDU.init();
+         */
-      }
+        PushBAIDU.prototype.pv = function (pageUrl) {
-      router.afterEach(function (to) {
+            var _this = this;
-          var PAGE_URL = window.location.href;
+            this.siteIdList.forEach(function (siteId) {
-          pushBAIDU.pv(PAGE_URL);
+                var SITE = new BAIDU(siteId, _this.isDebug);
-      });
+                SITE.trackPageview(pageUrl);
-  }
+            });
+        };
+        /**
+         * 批量提交事件上报
+         */
+        PushBAIDU.prototype.event = function (category, action, label, value) {
+            var _this = this;
+            this.siteIdList.forEach(function (siteId) {
+                var SITE = new BAIDU(siteId, _this.isDebug);
+                SITE.trackEvent(category, action, label, value);
+            });
+        };
+        return PushBAIDU;
+    }());
 
-  return install;
+    /**
+     * 获取Vue的版本
+     * @return 2=Vue2.x, 3=Vue3.x
+     */
+    var getVueVersion = function (Vue) {
+        var version = 2;
+        // 获取Vue的版本号
+        var VUE_VERSION = 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;
+    };
+
+    /**
+     * 全局的数据
+     */
+    var __GLOBAL__ = {
+        pushBAIDU: {}
+    };
+    /**
+     * 暴露 Hooks
+     * @description 解决 Vue 3.0 使用全局变量很麻烦的问题
+     * @example
+     * import { usePush } from 'vue-baidu-analytics'
+     * const baidu = usePush();
+     * baidu.pv('/');
+     */
+    function usePush() {
+        // 提交 pv
+        function pv(pageUrl) {
+            return __GLOBAL__.pushBAIDU.pv(pageUrl);
+        }
+        // 提交事件
+        function event(category, action, label, value) {
+            return __GLOBAL__.pushBAIDU.event(category, action, label, value);
+        }
+        return {
+            pv: pv,
+            event: event
+        };
+    }
+    /**
+     * 定义插件
+     */
+    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') {
+            return false;
+        }
+        if (!router) {
+            throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
+        }
+        if (!siteIdList) {
+            throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics siteId.');
+        }
+        /**
+         * 挂载推送的方法
+         */
+        var pushBAIDU = new PushBAIDU(siteIdList, isDebug);
+        __GLOBAL__.pushBAIDU = pushBAIDU;
+        /**
+         * 挂载全局变量到 Vue 上
+         * 获取Vue版本（获取失败则默认为2）
+         */
+        var VUE_VERSION = getVueVersion(Vue) || 2;
+        switch (VUE_VERSION) {
+            case 2:
+                Vue.prototype.$pushBAIDU = pushBAIDU;
+                break;
+            case 3:
+                Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+                break;
+        }
+        /**
+         * 部署站点并初始化
+         */
+        if (siteIdList && Array.isArray(siteIdList)) {
+            pushBAIDU.init();
+        }
+        /**
+         * 路由切换时执行PV上报
+         */
+        router.afterEach(function (to) {
+            // 获取要上报的链接（当前版本不需要拼接了）
+            var PAGE_URL = window.location.href;
+            // 上报数据
+            pushBAIDU.pv(PAGE_URL);
+        });
+    }
+
+    exports.default = install;
+    exports.usePush = usePush;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
 //# sourceMappingURL=vue-baidu-analytics.js.map

dist/vue-baidu-analytics.min.js

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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-baidu-analytics",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "A data collection tool that supports reporting of single-page application data built by Vue 3.0 & 2.0 & VuePress, based on baidu statistics.",
   "main": "dist/vue-baidu-analytics.min.js",
   "types": "vue-baidu-analytics.d.ts",
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chengpeiquan/vue-baidu-analytics.git"
+    "url": "git+https://github.com/analyticsjs/vue-baidu-analytics.git"
   },
   "keywords": [
     "baidu",
@@ -26,6 +26,7 @@
     "百度统计"
   ],
   "author": "chengpeiquan",
+  "homepage": "https://github.com/analyticsjs/vue-baidu-analytics",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -37,11 +38,13 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/babel__core": "^7.1.9",
-    "rollup": "^2.26.4",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "rollup-plugin-banner": "^0.2.1",
+    "@typescript-eslint/parser": "^4.20.0",
-    "rollup-plugin-banner2": "^1.0.0",
+    "eslint": "^7.23.0",
+    "rollup": "^2.44.0",
+    "rollup-plugin-banner2": "^1.2.2",
     "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-typescript2": "^0.30.0",
     "tslib": "^2.0.1",
     "typescript": "^4.0.2"
   }

rollup.config.ts

@@ -7,14 +7,12 @@ import banner2 from 'rollup-plugin-banner2'
 import typescript from 'rollup-plugin-typescript2'
 import pkg from './package.json'
 
-// 版权信息配置
+// 输出选项
-const ResolveBanner = () => {
+const outputOptions = {
-  return `/** 
+  format: 'umd',
- * name: ${pkg.name}
+  name: 'baiduAnalytics',
- * version: v${pkg.version}
+  exports: 'named',
- * author: ${pkg.author}
+  sourcemap: true
- */
- `;
 }
 
 export default {
@@ -22,32 +20,31 @@ export default {
   output: [
     {
       file: `dist/vue-baidu-analytics.js`,
-      format: 'umd',
+      ...outputOptions
-      name: 'baiduAnalytics',
-      sourcemap: true
     },
     {
       file: `dist/vue-baidu-analytics.min.js`,
-      format: 'umd',
-      name: 'baiduAnalytics',
       plugins: [
         terser()
       ],
-      sourcemap: true
+      ...outputOptions
     }
   ],
   plugins: [
     resolve({
       browser: true
     }),
+
     babel({
       babelHelpers: 'bundled'
     }),
+
     commonjs(),
+
     json(),
+
     typescript(),
-    banner2( ResolveBanner, {
+
-      sourcemap: true
+    banner2(() => `/*!\n * name: ${pkg.name}\n * version: v${pkg.version}\n * author: ${pkg.author}\n */\n`)
-    })
   ]
 };

src/global.d.ts

@@ -2,23 +2,23 @@ import PushBAIDU from '@m/pushBAIDU'
 
 declare global {
   interface Window {
-    _hmt: any
+    _hmt: any;
   }
 
   interface Options {
-    router: any
+    router: any;
-    siteIdList: string[]
+    siteIdList: string[];
-    isDebug: boolean
+    isDebug: boolean;
   }
-  
+
   interface Vue {
-    prototype: any
+    prototype: any;
-    $pushBAIDU: PushBAIDU
+    $pushBAIDU: PushBAIDU;
-    version: number | string
+    version: number | string;
-    config: any
+    config: any;
   }
-  
+
   interface To {
-    fullPath: string
+    fullPath: string;
   }
-}
+}

src/main.ts

@@ -1,12 +1,44 @@
 import PushBAIDU from '@m/pushBAIDU'
 import getVueVersion from '@m/getVueVersion'
 
-/** 
+/**
+ * 全局的数据
+ */
+const __GLOBAL__ = {
+  pushBAIDU: {} as PushBAIDU
+}
+
+/**
+ * 暴露 Hooks
+ * @description 解决 Vue 3.0 使用全局变量很麻烦的问题
+ * @example
+ * import { usePush } from 'vue-baidu-analytics'
+ * const baidu = usePush();
+ * baidu.pv('/');
+ */
+export function usePush () {
+  // 提交 pv
+  function pv (pageUrl: string) {
+    return __GLOBAL__.pushBAIDU.pv(pageUrl);
+  }
+
+  // 提交事件
+  function event (category: string, action: string, label: string, value: number) {
+    return __GLOBAL__.pushBAIDU.event(category, action, label, value);
+  }
+
+  return {
+    pv,
+    event
+  }
+}
+
+/**
  * 定义插件
  */
 export default function install (Vue: Vue, { router, siteIdList, isDebug = false }: Partial<Options>) {
 
-  /** 
+  /**
    * 一些环境和参数的检查
    */
   if ( typeof document === 'undefined' || typeof window === 'undefined' ) {
@@ -18,42 +50,44 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
   }
 
   if ( !siteIdList ) {
-    throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
+    throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics siteId.');
   }
 
-  /** 
+  /**
    * 挂载推送的方法
    */
-  const pushBAIDU: any = new PushBAIDU(siteIdList, isDebug);
+  const pushBAIDU: PushBAIDU = new PushBAIDU(siteIdList, isDebug);
-  
+  __GLOBAL__.pushBAIDU = pushBAIDU;
-  // 获取Vue版本（获取失败则默认为2）
+
+  /**
+   * 挂载全局变量到 Vue 上
+   * 获取Vue版本（获取失败则默认为2）
+   */
   const VUE_VERSION: number = getVueVersion(Vue) || 2;
-
+  switch (VUE_VERSION) {
-  // 2.x可以直接挂载到原型上
+    case 2:
-  if ( VUE_VERSION === 2 ) {
+      Vue.prototype.$pushBAIDU = pushBAIDU;
-    Vue.prototype.$pushBAIDU = pushBAIDU;
+      break;
+    case 3:
+      Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+      break;
   }
 
-  // 3.x必须使用这个方式来挂载
+  /**
-  if ( VUE_VERSION === 3 ) {
-    Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
-  }
-
-  /** 
    * 部署站点并初始化
    */
-  if ( siteIdList ) {
+  if ( siteIdList && Array.isArray(siteIdList) ) {
     pushBAIDU.init();
   }
 
-  /** 
+  /**
    * 路由切换时执行PV上报
    */
   router.afterEach( (to: To) => {
     // 获取要上报的链接（当前版本不需要拼接了）
     const PAGE_URL: string = window.location.href;
-    
+
     // 上报数据
     pushBAIDU.pv(PAGE_URL);
   });
-}
+}

src/modules/baidu.ts

@@ -1,4 +1,4 @@
-/** 
+/**
  * 定义基础配置
  * 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
  */
@@ -11,7 +11,7 @@ class BAIDU {
     this.isDebug = isDebug;
   }
 
-  /** 
+  /**
    * 初始化
    */
   init () {
@@ -19,21 +19,21 @@ class BAIDU {
     const SCRIPT = document.createElement('script');
     SCRIPT['async'] = true;
     SCRIPT['src'] = `https://hm.baidu.com/hm.js?${this.siteId}`;
-    document.querySelector('head').appendChild(SCRIPT);
+    document.querySelector('head')?.appendChild(SCRIPT);
 
     if ( this.isDebug ) {
       console.log(`[vue-baidu-analytics] siteId load done.\nsiteId:    ${this.siteId}`);
     }
   }
 
-  /** 
+  /**
    * 设置要响应的站点
    */
   setAccount () {
     window._hmt.push(['_setAccount', this.siteId]);
   }
 
-  /** 
+  /**
    * 提交PV、UV
    */
   trackPageview (pageUrl: string) {
@@ -49,7 +49,7 @@ class BAIDU {
       pageUrl = pageUrl.replace(HOST_NAME, '');
     }
 
-    // 设置响应id并提交数据
+    // 设置响应 id 并提交数据
     this.setAccount();
     window._hmt.push(['_trackPageview', pageUrl]);
 
@@ -58,14 +58,13 @@ class BAIDU {
     }
   }
 
-  /** 
+  /**
    * 提交点击事件
    */
   trackEvent (category: string, action: string, label: string, value: number) {
     // 前两个是必填项
     if ( typeof category !== 'string' ||  typeof action !== 'string' || !category || !action ) {
       throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
-      return false;
     }
 
     // 重置一些无效的默认值
@@ -87,4 +86,4 @@ class BAIDU {
   }
 }
 
-export default BAIDU;
+export default BAIDU;

src/modules/pushBAIDU.ts

@@ -1,6 +1,6 @@
 import BAIDU from '@m/baidu'
 
-/** 
+/**
  * 定义推送操作
  */
 class PushBAIDU {
@@ -8,11 +8,11 @@ class PushBAIDU {
   isDebug: boolean;
 
   constructor (siteIdList: string[], isDebug: boolean) {
-    this.siteIdList = siteIdList;
+    this.siteIdList = [...siteIdList];
     this.isDebug = isDebug;
   }
 
-  /** 
+  /**
    * 批量部署站点
    */
   init () {
@@ -22,7 +22,7 @@ class PushBAIDU {
     });
   }
 
-  /** 
+  /**
    * 批量提交pv上报
    */
   pv (pageUrl: string) {
@@ -32,7 +32,7 @@ class PushBAIDU {
     });
   }
 
-  /** 
+  /**
    * 批量提交事件上报
    */
   event (category: string, action: string, label: string, value: number) {
@@ -44,4 +44,4 @@ class PushBAIDU {
 
 }
 
-export default PushBAIDU;
+export default PushBAIDU;

tsconfig.json

@@ -2,11 +2,15 @@
   "compilerOptions": {
     "target": "ES5",
     "module": "ES2015",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "noImplicitAny": true,
-    "removeComments": true,
-    "preserveConstEnums": true,
     "sourceMap": true,
+    "strictNullChecks": true,
     "baseUrl": ".",
     "paths": {
       "@/*": [