'release'

.browserslistrc

@@ -0,0 +1,2 @@
+> 1%
+last 2 versions

.editorconfig

@@ -0,0 +1,15 @@
+# http://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+max_line_length = 80
+trim_trailing_whitespace = true
+
+[*.md]
+max_line_length = 0
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,17 @@
+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'
+  }
+}

.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,2 +1,130 @@
-# vue-baidu-analytics
-A data collection tool that supports reporting of single-page application data built by Vue-cli, based on Baidu statistics.
+vue-baidu-analytics 使用说明
+===
+
+基于Vue-CLI 3.0开发的百度统计插件，支持自动上报切换路由产生的流量数据，同时对官方api进行了二次封装，简化了手动上报数据的操作。
+
+本插件支持部署多个站点id并对应上报数据（需求背景：比如部门A和部门B合作的项目，两个部门都要加上自己的统计代码算入自己的业绩流量池…）。
+
+## 功能
+
+* 异步载入百度统计脚本，无需修改入口html
+
+* 支持部署多个站点id，并对应进行数据上报
+
+* 支持自动上报路由切换产生的pv数据（支持hash模式和history模式）
+
+* 支持手动提交pv上报
+
+* 支持手动提交事件分析上报
+
+## 参数
+
+参数|是否必填|参数类型|参数说明
+:-:|:-:|::-
+router|是|JSON Object|Vue Router，本插件基于路由使用
+siteIdList|是|Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+debug|否|Boolean|是否开启debug模式，默认false<br>开启后会在控制台打印上报信息，上线前记得关闭
+
+## 安装
+
+在npm上安装
+
+>npm i vue-baidu-analytics
+
+然后在 main.js 里引入插件。
+
+```javascript
+import baiduAnalytics from 'vue-baidu-analytics'
+```
+
+## 使用
+
+安装插件后，在 main.js 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
+
+后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
+
+```javascript
+Vue.use(baiduAnalytics, {
+  router: router,
+  siteIdList: [
+    'your siteid',
+    'your another siteid',
+    'your one more siteid',
+    '…'
+  ],
+  debug: false
+});
+```
+
+可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
+
+## api
+
+插件目前封装了两个常用的api，可在组件里调用。
+
+注：如果配置了多个站点id，会同时上报给所有站点。
+
+### 手动上报PV
+
+api名称|功能说明
+:-:|::-
+$trackBaiduPv|手动执行PV数据上报
+
+#### api参数
+
+参数|是否必填|参数类型|参数说明
+:-:|:-:|::-
+url|否|String|提交上报的url，必须是以"/"（斜杠）开头的相对路径<br>如果不填，则会默认提交为域名根目录
+
+详细的参数使用要求请查看官方文档：
+
+>https://tongji.baidu.com/open/api/more?p=guide_trackPageview
+
+注：原本url是必填，插件处理了一个默认值，所以变成选填。
+
+#### 使用示范
+
+在template里使用
+
+```html
+<button @click="$trackBaiduPv('/test')">手动上报PV</button>
+```
+
+在method里使用
+
+```javascript
+this.$trackBaiduPv('/test');
+```
+
+### 手动上报事件分析
+
+api名称|功能说明
+:-:|::-
+$trackBaiduEvent|手动执行事件分析数据上报
+
+#### api参数
+
+参数|是否必填|参数类型|参数说明
+:-:|:-:|::-
+category|是|String|事件名称
+action|是|String|交互动作
+opt_label|否|String|事件信息，默认为空
+opt_value|否|Number|事件价值，默认1
+
+详细的参数使用要求请查看官方文档
+
+>https://tongji.baidu.com/open/api/more?p=guide_trackEvent
+
+#### 使用示范
+
+在template里使用
+
+```html
+<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
+```
+
+在method里使用
+
+```javascript
+this.$trackBaiduEvent('act_vote', 'click', 'works', 1);
+```

babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "vue-baidu-analytics-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "core-js": "^3.4.3",
+    "vue": "^2.6.10",
+    "vue-router": "^3.1.3"
+  },
+  "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"
+  }
+}

public/index.html

@@ -0,0 +1,17 @@
+<!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>

src/App.vue

@@ -0,0 +1,12 @@
+<template>
+  <div id="app">
+    <router-view/>
+  </div>
+</template>
+
+<style lang="stylus" scoped>
+#app
+  width 100%
+  max-width 900px
+  margin 0 auto
+</style>

src/assets/js/lib/vue-baidu-analytics/index.js

@@ -0,0 +1,117 @@
+'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);
+    });
+  }
+}

src/main.js

@@ -0,0 +1,22 @@
+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: [
+    '7d6465217b1b44018c4557d9e7d804eb',
+    '4cacea1098b6c4d16990a04abd93c9a9',
+    '5be8daec4f7dd86255ae9320369c7678'
+  ],
+  debug: true
+});
+
+Vue.config.productionTip = false
+
+new Vue({
+  router,
+  render: h => h(App)
+}).$mount('#app')

src/router/index.js

@@ -0,0 +1,38 @@
+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

src/views/home.vue

@@ -0,0 +1,69 @@
+<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>

vue.config.js

@@ -0,0 +1,65 @@
+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! ')
+      ]
+    };
+  }
+}