Release v1.1.0

2025-04-05 07:52:44 +08:00 · 2020-09-06 18:31:00 +08:00 · 2020-09-06 18:31:00 +08:00 · 5eb42e6663
commit 5eb42e6663
parent f3fbec899f
30 changed files with 566 additions and 11962 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,18 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": {
+          "browsers": "> 1%, IE 11, not op_mini all, not dead"
+        },
+        "useBuiltIns": "usage",
+        "corejs": 2
+      }
+    ]
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties"
+  ]
+}
--- a/.browserslistrc
+++ b/.browserslistrc
@ -1,2 +0,0 @@
-> 1%
-last 2 versions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -1,17 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/essential',
-    'eslint:recommended'
-  ],
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
-  },
-  parserOptions: {
-    parser: 'babel-eslint'
-  }
-}
--- a/.gitignore
+++ b/.gitignore
@ -1,3 +1,4 @@
+index.dev.js
 .DS_Store
 node_modules
 /dist
--- a/README.md
+++ b/README.md
@ -1,9 +1,9 @@
 vue-baidu-analytics 使用说明
 ===

-基于Vue-CLI 3.0开发的百度统计插件，支持自动上报切换路由产生的流量数据，同时对官方api进行了二次封装，简化了手动上报数据的操作。
+基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。

-本插件支持部署多个站点id并对应上报数据（需求背景：比如部门A和部门B合作的项目，两个部门都要加上自己的统计代码算入自己的业绩流量池…）。
+注意：本插件在 `1.0.0` 版本的部分参数和api现在有所弃用，请按照当前最新文档说明使用新版本，或者安装以前的 `1.0.0` 旧版本使用。

 ## 功能

@ -11,7 +11,7 @@ vue-baidu-analytics 使用说明

 * 支持部署多个站点id，并对应进行数据上报

-* 支持自动上报路由切换产生的pv数据（支持hash模式和history模式）
+* 支持自动上报路由切换产生的pv数据（支持 `hash模式` 和 `history模式` 的地址）

 * 支持手动提交pv上报

@ -27,110 +27,109 @@ demo已开启debug模式，可开启控制台查看上报情况。

 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
-router|是|JSON Object|Vue Router，本插件基于路由使用
-siteIdList|是|Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
-debug|否|Boolean|是否开启debug模式，默认false<br>开启后会在控制台打印上报信息，上线前记得关闭
+router|是|object|Vue Router，本插件基于路由使用
+siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**

 ## 安装

-在npm上安装
+### 通过npm安装

->npm i vue-baidu-analytics
+```
+npm install vue-baidu-analytics --save-dev
+```

-然后在 main.js 里引入插件。
+### 通过cdn安装

-```javascript
-import baiduAnalytics from 'vue-baidu-analytics'
+```html
+<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
 ```

 ## 使用

-安装插件后，在 main.js 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
+通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。

-后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
+```js
+import baiduAnalytics from 'vue-baidu-analytics'
+```

-```javascript
+安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
+
+后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
+
+```js
 Vue.use(baiduAnalytics, {
  router: router,
  siteIdList: [
-    'your siteid',
-    'your another siteid',
-    'your one more siteid',
-    '…'
+    'aaaaaaaaaaaaaaaaaaa',
+    'bbbbbbbbbbbbbbbbbbb',
+    'ccccccccccccccccccc'
  ],
-  debug: false
+  isDebug: false
 });
 ```

 可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。

-## api
+## 方法

-插件目前封装了两个常用的api，可在组件里调用。
+插件目前封装了两个常用的api，统一挂载到Vue实例上的 `$pushBAIDU` 去调用。

 注：如果配置了多个站点id，会同时上报给所有站点。

-### 手动上报PV
+### 手动上报页面PV

 api名称|功能说明
 :-:|-
-$trackBaiduPv|手动执行PV数据上报
+pv|手动执行PV数据上报

-#### api参数
+**api参数**

 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
-url|否|String|提交上报的url，必须是以"/"（斜杠）开头的相对路径<br>如果不填，则会默认提交为域名根目录
+pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<br>如果不填，则会默认提交为域名根目录

-详细的参数使用要求请查看官方文档：
-
->https://tongji.baidu.com/open/api/more?p=guide_trackPageview
-
-注：原本url是必填，插件处理了一个默认值，所以变成选填。
-
-#### 使用示范
+**使用示范**

 在template里使用

 ```html
-<button @click="$trackBaiduPv('/test')">手动上报PV</button>
+<button @click="$pushBAIDU.pv('/test')">手动上报PV</button>
 ```

 在method里使用

-```javascript
-this.$trackBaiduPv('/test');
+```js
+// this是Vue实例
+this.$pushBAIDU.pv('/home');
 ```

 ### 手动上报事件分析

 api名称|功能说明
 :-:|-
-$trackBaiduEvent|手动执行事件分析数据上报
+event|手动执行事件分析数据上报

-#### api参数
+**api参数**

 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
-category|是|String|事件名称
-action|是|String|交互动作
-opt_label|否|String|事件信息，默认为空
-opt_value|否|Number|事件价值，默认1
+category|是|string|产生该事件的位置名称，比如 `首页banner`
+action|是|string|产生该事件的行为描述，比如 `点击`
+label|否|string|产生该事件的标签名称，可以用来记录事件子id，比如 `bannerId_123`，默认为空
+value|否|number|该事件的分值，默认0

-详细的参数使用要求请查看官方文档
+**使用示范**

->https://tongji.baidu.com/open/api/more?p=guide_trackEvent
-
-#### 使用示范
-
-在template里使用
+在template里使用（比如：点击了一个id为123的首页banner）

 ```html
-<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
+<button @click="$pushBAIDU.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
 ```

-在method里使用
+在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）

-```javascript
-this.$trackBaiduEvent('act_vote', 'click', 'works', 1);
-```
+```js
+// this是Vue实例
+this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
+```
--- a/babel.config.js
+++ b/babel.config.js
@ -1,5 +0,0 @@
-module.exports = {
-  presets: [
-    '@vue/cli-plugin-babel/preset'
-  ]
-}
--- a/demo/favicon.ico
+++ b/demo/favicon.ico
--- a/demo/index.html
+++ b/demo/index.html
@ -1 +1,110 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-baidu-analytics-demo</title><link href=static/css/home.6fd0d033.css rel=prefetch><link href=static/js/home.80371ab3.js rel=prefetch><link href=static/css/app.8a825cf3.css rel=preload as=style><link href=static/js/app.549712c5.js rel=preload as=script><link href=static/js/chunk-vendors.0d330f5a.js rel=preload as=script><link href=static/css/app.8a825cf3.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-baidu-analytics-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=static/js/chunk-vendors.0d330f5a.js></script><script src=static/js/app.549712c5.js></script></body></html>
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>vue baidu analytics demo</title>
+  <script src="https://unpkg.com/vue/dist/vue.js"></script>
+  <script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
+  <style>
+    #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">
+      <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/main.js"></script>
+  
+</body>
+</html>
--- a/demo/js/main.js
+++ b/demo/js/main.js
@ -0,0 +1,68 @@
+// 定义路由信息
+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);
+    }
+  }
+});
--- a/demo/static/css/app.8a825cf3.css
+++ b/demo/static/css/app.8a825cf3.css
@ -1 +0,0 @@
-/*!  The roject developed by chengpeiquan!  */#app[data-v-74bbf350]{width:100%;max-width:900px;margin:0 auto}
--- a/demo/static/css/home.6fd0d033.css
+++ b/demo/static/css/home.6fd0d033.css
@ -1 +0,0 @@
-/*!  The roject developed by chengpeiquan!  */.nav[data-v-0d96c593]{display:flex}.nav .item[data-v-0d96c593]{display:flex;justify-content:center;align-items:center;width:20%;height:100px;color:#333;background-color:#eee;text-decoration:none;cursor:pointer}.nav .item.cur[data-v-0d96c593],.nav .item[data-v-0d96c593]:hover{color:#fff;background-color:#999}.buttons[data-v-0d96c593]{display:flex}.buttons button[data-v-0d96c593]{font-size:16px;cursor:pointer;padding:20px;margin-right:20px}
--- a/demo/static/js/app.549712c5.js
+++ b/demo/static/js/app.549712c5.js
--- a/demo/static/js/chunk-vendors.0d330f5a.js
+++ b/demo/static/js/chunk-vendors.0d330f5a.js
--- a/demo/static/js/home.80371ab3.js
+++ b/demo/static/js/home.80371ab3.js
@ -1,2 +0,0 @@
-/*!  The roject developed by chengpeiquan!  */
-(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["home"],{5034:function(t,n,e){"use strict";var a=e("8922"),r=e.n(a);r.a},6511:function(t,n,e){"use strict";e.r(n);var a=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"main"},[e("p",[t._v("导航会自动上报数据")]),e("nav",{staticClass:"nav"},t._l(t.navList,(function(n){return e("router-link",{staticClass:"item",attrs:{to:n.url,exact:""}},[t._v(t._s(n.text))])})),1),e("p",[t._v("按钮可手动上报数据")]),e("div",{staticClass:"buttons"},[e("button",{on:{click:function(n){return t.$trackBaiduPv("/test")}}},[t._v("手动上报PV")]),e("button",{on:{click:function(n){return t.$trackBaiduEvent("act_vote","click","works",1)}}},[t._v("手动上报分析事件")])])])},r=[],u={data:function(){return{navList:[{url:"/home",text:"首页"},{url:"/home?id=123456",text:"单个query"},{url:"/home?id=123456&name=张三&age=18",text:"多个query"},{url:"/user/123456",text:"带params"},{url:"/user/123456?id=123456",text:"带params和query"}]}}},s=u,i=(e("5034"),e("2877")),c=Object(i["a"])(s,a,r,!1,null,"0d96c593",null);n["default"]=c.exports},8922:function(t,n,e){}}]);
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,26 +1,42 @@
 {
-  "name": "vue-baidu-analytics-demo",
-  "version": "0.1.0",
-  "private": true,
+  "name": "vue-baidu-analytics",
+  "version": "1.1.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",
  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint"
+    "build": "rollup -c rollup.config.ts"
  },
-  "dependencies": {
-    "core-js": "^3.4.3",
-    "vue": "^2.6.10",
-    "vue-router": "^3.1.3"
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/chengpeiquan/vue-baidu-analytics.git"
  },
+  "keywords": [
+    "baidu",
+    "vue baidu",
+    "vue 百度统计",
+    "vue analytics",
+    "spa analytics",
+    "baidu统计",
+    "百度统计"
+  ],
+  "author": "chengpeiquan",
+  "license": "MIT",
  "devDependencies": {
-    "@vue/cli-plugin-babel": "^4.1.0",
-    "@vue/cli-plugin-eslint": "^4.1.0",
-    "@vue/cli-service": "^4.1.0",
-    "babel-eslint": "^10.0.3",
-    "eslint": "^5.16.0",
-    "eslint-plugin-vue": "^5.0.0",
-    "stylus": "^0.54.7",
-    "stylus-loader": "^3.0.2",
-    "vue-template-compiler": "^2.6.10"
+    "@babel/core": "^7.11.1",
+    "@babel/plugin-proposal-class-properties": "^7.10.4",
+    "@babel/preset-env": "^7.11.0",
+    "@babel/preset-typescript": "^7.10.4",
+    "@rollup/plugin-babel": "^5.2.0",
+    "@rollup/plugin-commonjs": "^15.0.0",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^9.0.0",
+    "@types/babel__core": "^7.1.9",
+    "rollup": "^2.26.4",
+    "rollup-plugin-banner": "^0.2.1",
+    "rollup-plugin-banner2": "^1.0.0",
+    "rollup-plugin-terser": "^7.0.0",
+    "rollup-plugin-typescript2": "^0.27.2",
+    "tslib": "^2.0.1",
+    "typescript": "^4.0.2"
  }
 }
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/public/index.html
+++ b/public/index.html
@ -1,17 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title>vue-baidu-analytics-demo</title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but vue-baidu-analytics-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
-</html>
--- a/rollup.config.ts
+++ b/rollup.config.ts
@ -0,0 +1,53 @@
+import resolve from '@rollup/plugin-node-resolve'
+import babel from '@rollup/plugin-babel'
+import commonjs from '@rollup/plugin-commonjs'
+import json from '@rollup/plugin-json'
+import { terser } from 'rollup-plugin-terser'
+import banner2 from 'rollup-plugin-banner2'
+import typescript from 'rollup-plugin-typescript2'
+import pkg from './package.json'
+
+// 版权信息配置
+const ResolveBanner = () => {
+  return `/** 
+ * name: ${pkg.name}
+ * version: v${pkg.version}
+ * author: ${pkg.author}
+ */
+ `;
+}
+
+export default {
+  input: 'src/main.ts',
+  output: [
+    {
+      file: `dist/vue-baidu-analytics.js`,
+      format: 'umd',
+      name: 'baiduAnalytics',
+      sourcemap: true
+    },
+    {
+      file: `dist/vue-baidu-analytics.min.js`,
+      format: 'umd',
+      name: 'baiduAnalytics',
+      plugins: [
+        terser()
+      ],
+      sourcemap: true
+    }
+  ],
+  plugins: [
+    resolve({
+      browser: true
+    }),
+    babel({
+      babelHelpers: 'bundled'
+    }),
+    commonjs(),
+    json(),
+    typescript(),
+    banner2( ResolveBanner, {
+      sourcemap: true
+    })
+  ]
+};
--- a/src/App.vue
+++ b/src/App.vue
@ -1,12 +0,0 @@
-<template>
-  <div id="app">
-    <router-view/>
-  </div>
-</template>
-
-<style lang="stylus" scoped>
-#app
-  width 100%
-  max-width 900px
-  margin 0 auto
-</style>
--- a/src/assets/js/lib/vue-baidu-analytics/index.js
+++ b/src/assets/js/lib/vue-baidu-analytics/index.js
@ -1,117 +0,0 @@
-'use strict';
-
-class analytics {
-  #siteId;
-  #isDebug;
-
-  constructor (siteId, isDebug) {
-    this.#siteId = siteId;
-    this.#isDebug = isDebug;
-  }
-
-  _loadScript () {
-    window._hmt = window._hmt ? window._hmt : [];
-    const SCRIPT = document.createElement('script');
-    SCRIPT['async'] = true;
-    SCRIPT['src'] = `https://hm.baidu.com/hm.js?${this.#siteId}`;
-    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]);
-  }
-
-  _trackPageview (url) {
-    if ( typeof url !== 'string' || !url ) {
-      url = '/';
-    }
-
-    this._setAccount();
-    window._hmt.push(['_trackPageview', url]);
-
-    if ( this.#isDebug ) {
-      console.log(`[vue-baidu-analytics] track pv done.\nsiteId:   ${this.#siteId}\nurl:      ${url}`);
-    }
-  }
-
-  _trackEvent (category, action, opt_label, opt_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.');
-      return false;
-    }
-
-    if ( typeof opt_label !== 'string' || !opt_label ) {
-      opt_label = '';
-    }
-
-    if ( typeof opt_value !== 'number' || !opt_value ) {
-      opt_value = 0;
-    }
-
-    this._setAccount();
-    window._hmt.push(['_trackEvent', category, action, opt_label, opt_value]);
-
-    if ( this.#isDebug ) {
-      console.log(`[vue-baidu-analytics] track event done.\nsiteId:      ${this.#siteId}\ncategory:    ${category}\naction:      ${action}\nopt_label:   ${opt_label}\nopt_value:   ${opt_value}`);
-    }
-  }
-}
-
-export default function install (Vue, options = {}) {
-
-  if ( typeof document === 'undefined' || typeof window === 'undefined' ) {
-    return false;
-  }
-
-  const { router, siteIdList, debug } = options;
-
-  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.');
-  }
-
-  let isDebug = false;
-  if ( debug === true ) {
-    isDebug = true;
-  }
-
-  if ( siteIdList ) {
-    siteIdList.forEach( siteId => {
-      const SITE = new analytics(siteId, isDebug);
-      SITE._loadScript();
-    });
-  }
-
-  router.afterEach( to => {
-
-    const REPORT_PATH_DIR_COUNT = window.location.pathname.split('/').length;
-    const REPORT_PATH = window.location.pathname.split('/').slice(0, REPORT_PATH_DIR_COUNT - 1).join('/');
-    const REPORT_URL = router.mode === 'hash' ? `${REPORT_PATH}/#${to.fullPath}` : `${REPORT_PATH}${to.fullPath}`;
-
-    siteIdList.forEach( siteId => {
-      const SITE = new analytics(siteId, isDebug);
-      SITE._trackPageview(REPORT_URL);
-    });
-  });
-
-  Vue.prototype.$trackBaiduPv = (url) => {
-    siteIdList.forEach( siteId => {
-      const SITE = new analytics(siteId, isDebug);
-      SITE._trackPageview(url);
-    });
-  }
-
-  Vue.prototype.$trackBaiduEvent = (category, action, opt_label, opt_value) => {
-    siteIdList.forEach( siteId => {
-      const SITE = new analytics(siteId, isDebug);
-      SITE._trackEvent(category, action, opt_label, opt_value);
-    });
-  }
-}
--- a/src/global.d.ts
+++ b/src/global.d.ts
@ -0,0 +1,22 @@
+import PushBAIDU from '@m/pushBAIDU'
+
+declare global {
+  interface Window {
+    _hmt: any
+  }
+
+  interface Options {
+    router: any
+    siteIdList: string[]
+    isDebug: boolean
+  }
+  
+  interface Vue {
+    prototype: any
+    $pushBAIDU: PushBAIDU
+  }
+  
+  interface To {
+    fullPath: string
+  }
+}
--- a/src/main.js
+++ b/src/main.js
@ -1,22 +0,0 @@
-import Vue from 'vue'
-import App from './App.vue'
-import router from './router'
-
-import baiduAnalytics from '@lib/vue-baidu-analytics'
-
-Vue.use(baiduAnalytics, {
-  router: router,
-  siteIdList: [
-    'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
-    'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
-    'cccccccccccccccccccccccccccccccc'
-  ],
-  debug: true
-});
-
-Vue.config.productionTip = false
-
-new Vue({
-  router,
-  render: h => h(App)
-}).$mount('#app')
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,43 @@
+import PushBAIDU from '@m/pushBAIDU'
+
+export default function install (Vue: Vue, { router, siteIdList, isDebug = false }: Partial<Options>) {
+
+  /** 
+   * 一些环境和参数的检查
+   */
+  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.');
+  }
+
+  /** 
+   * 挂载推送的方法
+   */
+  const pushBAIDU = new PushBAIDU(siteIdList, isDebug);
+  Vue.prototype.$pushBAIDU = pushBAIDU;
+
+  /** 
+   * 部署站点并初始化
+   */
+  if ( siteIdList ) {
+    pushBAIDU.init();
+  }
+
+  /** 
+   * 路由切换时执行PV上报
+   */
+  router.afterEach( (to: To) => {
+    const PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
+    const PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
+    const PAGE_URL = router.mode === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
+
+    pushBAIDU.pv(PAGE_URL);
+  });
+}
--- a/src/modules/baidu.ts
+++ b/src/modules/baidu.ts
@ -0,0 +1,90 @@
+/** 
+ * 定义基础配置
+ * 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
+ */
+class BAIDU {
+  siteId: string;
+  isDebug: boolean;
+
+  constructor (siteId: string = '', isDebug: boolean = false) {
+    this.siteId = siteId;
+    this.isDebug = isDebug;
+  }
+
+  /** 
+   * 初始化
+   */
+  init () {
+    window._hmt = window._hmt ? window._hmt : [];
+    const SCRIPT = document.createElement('script');
+    SCRIPT['async'] = true;
+    SCRIPT['src'] = `https://hm.baidu.com/hm.js?${this.siteId}`;
+    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) {
+    // 如果页面链接没传或者无效链接，则默认为根域名
+    if ( !pageUrl || typeof pageUrl !== 'string' ) {
+      pageUrl = '/';
+    }
+
+    // 如果页面链接带上了域名，则需要过滤掉
+    if ( pageUrl.includes('http') ) {
+      const PAGE_CUT = pageUrl.split('/');
+      const 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}`);
+    }
+  }
+
+  /** 
+   * 提交点击事件
+   */
+  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;
+    }
+
+    // 重置一些无效的默认值
+    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}`);
+    }
+  }
+}
+
+export default BAIDU;
--- a/src/modules/pushBAIDU.ts
+++ b/src/modules/pushBAIDU.ts
@ -0,0 +1,47 @@
+import BAIDU from '@m/baidu'
+
+/** 
+ * 定义推送操作
+ */
+class PushBAIDU {
+  siteIdList: string[];
+  isDebug: boolean;
+
+  constructor (siteIdList: string[], isDebug: boolean) {
+    this.siteIdList = siteIdList;
+    this.isDebug = isDebug;
+  }
+
+  /** 
+   * 批量部署站点
+   */
+  init () {
+    this.siteIdList.forEach( (siteId: string) => {
+      const SITE = new BAIDU(siteId, this.isDebug);
+      SITE.init();
+    });
+  }
+
+  /** 
+   * 批量提交pv上报
+   */
+  pv (pageUrl: string) {
+    this.siteIdList.forEach( (siteId: string) => {
+      const SITE = new BAIDU(siteId, this.isDebug);
+      SITE.trackPageview(pageUrl);
+    });
+  }
+
+  /** 
+   * 批量提交事件上报
+   */
+  event (category: string, action: string, label: string, value: number) {
+    this.siteIdList.forEach( (siteId: string) => {
+      const SITE = new BAIDU(siteId, this.isDebug);
+      SITE.trackEvent(category, action, label, value);
+    });
+  }
+
+}
+
+export default PushBAIDU;
--- a/src/router/index.js
+++ b/src/router/index.js
@ -1,38 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-
-Vue.use(VueRouter)
-
-const routes = [
-  {
-    path: '/',
-    redirect: 'home'
-  },
-  {
-    path: '/home',
-    name: 'home',
-    component: () => import(/* webpackChunkName: "home" */ '../views/home.vue'),
-    children: [
-      {
-        path: 'room',
-        name: 'room',
-        component: () => import(/* webpackChunkName: "subRoom" */ '../views/home.vue')
-      }
-    ]
-  },
-  {
-    path: '/user/:id',
-    name: 'user',
-    component: () => import(/* webpackChunkName: "user" */ '../views/home.vue')
-  }
-]
-
-const router = new VueRouter({
-  // base: process.env.NODE_ENV === 'production' ? location.pathname.split('/').slice(0, 2).join('/') : '/',
-  // mode: 'history',
-  linkActiveClass: 'cur',
-  linkExactActiveClass: 'cur',
-  routes
-})
-
-export default router
--- a/src/views/home.vue
+++ b/src/views/home.vue
@ -1,69 +0,0 @@
-<template>
-  <div class="main">
-    <p>导航会自动上报数据</p>
-    <nav class="nav">
-      <router-link class="item" :to="item.url" v-for="item in navList" exact>{{ item.text }}</router-link>
-    </nav>
-    <p>按钮可手动上报数据</p>
-    <div class="buttons">
-      <button @click="$trackBaiduPv('/test')">手动上报PV</button>
-      <button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      navList: [
-        {
-          url: '/home',
-          text: '首页'
-        },
-        {
-          url: '/home?id=123456',
-          text: '单个query'
-        },
-        {
-          url: '/home?id=123456&name=张三&age=18',
-          text: '多个query'
-        },
-        {
-          url: '/user/123456',
-          text: '带params'
-        },
-        {
-          url: '/user/123456?id=123456',
-          text: '带params和query'
-        }
-      ]
-    }
-  }
-};
-</script>
-
-<style lang="stylus" scoped>
-.nav
-  display flex
-  .item
-    display flex
-    justify-content center
-    align-items center
-    width 20%
-    height 100px
-    color #333
-    background-color #eee
-    text-decoration none
-    cursor pointer
-    &:hover, &.cur
-      color #fff
-      background-color #999
-.buttons
-  display flex
-  button
-    font-size 16px
-    cursor pointer
-    padding 20px
-    margin-right 20px
-</style>
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "target": "ES5",
+    "module": "ES2015",
+    "allowSyntheticDefaultImports": true,
+    "noImplicitAny": true,
+    "removeComments": true,
+    "preserveConstEnums": true,
+    "sourceMap": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": [
+        "src/*"
+      ],
+      "@m/*": [
+        "src/modules/*"
+      ]
+    },
+    "declaration": true,
+    "declarationDir": "./dist"
+  },
+  "include": [
+    "src/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
--- a/vue.config.js
+++ b/vue.config.js
@ -1,65 +0,0 @@
-const webpack = require('webpack');
-const path = require('path');
-function resolve(dir){
-  return path.join(__dirname, dir)
-}
-
-module.exports = {
-  publicPath: './',
-  assetsDir: 'static',
-  productionSourceMap: false,
-  lintOnSave: false,
-  css: {
-    loaderOptions: {
-      css: {
-      // options here will be passed to css-loader
-      },
-      postcss: {
-        // options here will be passed to postcss-loader
-        plugins: [
-          // require('postcss-px2rem')({
-          //   remUnit: 75
-          // })
-          // require('postcss-px-to-viewport')({
-          //   viewportWidth: 750,
-          //   minPixelValue: 1
-          // })
-        ]
-      }
-    }
-  },
-  chainWebpack: (config)=>{
-    config.resolve.alias
-      .set('@', resolve('src'))
-      .set('@img',resolve('src/assets/img'))
-      .set('@styl',resolve('src/assets/styl'))
-      .set('@js',resolve('src/assets/js'))
-      .set('@lib',resolve('src/assets/js/lib'))
-      .set('@cp',resolve('src/components'))
-      .set('@views',resolve('src/views'))
-      .end()
-    config.module
-      .rule('images')
-        .test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
-        .use('url-loader')
-          .loader('url-loader')
-          .options({
-            limit: 10000,
-            fallback: {
-              loader: 'file-loader',
-              options: {
-                name: 'static/img/[name].[hash:8].[ext]'
-              }
-            }
-          })
-        .end()
-  },
-  configureWebpack: config => {
-    if (process.env.NODE_ENV !== 'production') return;
-    return {
-      plugins: [
-        new webpack.BannerPlugin(' The roject developed by chengpeiquan! ')
-      ]
-    };
-  }
-}
				`@ -1 +0,0 @@`
				`/! The roject developed by chengpeiquan! /#app[data-v-74bbf350]{width:100%;max-width:900px;margin:0 auto}`