add code

2025-04-05 03:05:08 +08:00 · 2017-07-13 23:47:48 +08:00 · 2017-07-13 23:47:48 +08:00 · 7bde77965a
commit 7bde77965a
39 changed files with 1149 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,18 @@
+{
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": ["istanbul"]
+    }
+  }
+}
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,9 @@
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,2 @@
+build/*.js
+config/*.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,27 @@
+// http://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: 'babel-eslint',
+  parserOptions: {
+    sourceType: 'module'
+  },
+  env: {
+    browser: true,
+  },
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  extends: 'standard',
+  // required to lint *.vue files
+  plugins: [
+    'html'
+  ],
+  // add your custom rules here
+  'rules': {
+    // allow paren-less arrow functions
+    'arrow-parens': 0,
+    // allow async-await
+    'generator-star-spacing': 0,
+    // allow debugger during development
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+  }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+test/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/.npmignore
+++ b/.npmignore
@ -0,0 +1,14 @@
+.DS_Store
+node_modules/
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+test/e2e/reports
+selenium-debug.log
+
+# Editor directories and files
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
--- a/.npminstall.done
+++ b/.npminstall.done
@ -0,0 +1 @@
+Thu Jul 13 2017 19:55:37 GMT+0800 (CST)
--- a/.postcssrc.js
+++ b/.postcssrc.js
@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,102 @@
+---
+title: VueJs百度统计插件
+date: 2017-07-13 23:10:31
+tags:
+    - vue
+    - 百度统计
+
+---
+
+# vue-ba
+
+> vuejs 百度统计埋点插件
+>
+> 参考项目：https://github.com/raychenfj/vue-uweb
+
+## 1. 安装
+
+```
+npm install vue-ba --save
+
+```
+直接在页面中引用
+```
+<script src="./node_modules/vue-uweb/dist/index.js"><script>
+```
+
+或者通过es6模块加载
+
+```
+import ba from 'vue-ba'
+
+```
+使用vue-ba插件
+
+```
+Vue.use(ba, 'YOUR_SITEID_HERE')
+
+```
+通过传递 options 参数进行更多设置
+
+```
+Vue.use(uweb,options)
+
+```
+#### options
+<table><tr><td>参数</td><td>必须</td><td>默认</td><td>说明</td><td>备注</td></tr><tr><td>siteId</td><td>是</td><td></td><td>绑定要接受API请求的统计代码</td><td></td></tr><tr><td> debug </td><td>否</td><td>false</td><td>调试模式下将在控制台中输出调用window._hmt时传递的参数</td><td>请不要在生产环境中使用，避免造成安全隐患</td></tr><tr><td> src </td><td>否</td><td>https://hm.baidu.com/hm.js?SITEID</td><td>指定统计脚本标签的 src 属性</td><td></td></tr></table>
+## 2. ba API
+
+### 2.1 trackEvent
+用于发送页面上按钮等交互元素被触发时的事件统计请求。
+#### 用法
+```
+this.$ba.trackEvent(category,action,opt_label,opt_value)
+```
+#### 参数
+<table><tr><td>参数</td><td>必须</td><td>类型</td><td>说明</td></tr><tr><td> category </td><td>是</td><td> string </td><td>表示事件发生在谁身上</td></tr>
+<tr><td> action </td><td>是</td><td> string </td><td>表示访客跟元素交互的行为动作</td></tr><tr><td> opt_label </td><td>否</td><td> string </td><td>用于更详细的描述事件</td></tr><tr><td> opt_value </td><td>否</td><td> int </td><td>用于填写打分型事件的分值，加载时间型事件的时长，如果填写为其他形式，系统将按0处理。若填写为浮点小数，系统会自动取整，去掉小数点。</td></tr></table>
+### 2.2 trackPageview
+用于发送某个URL的PV统计请求，适用于统计AJAX、异步加载页面，友情链接，下载链接的流量
+#### 用法
+```
+this.$ba.trackPageview(pageURL)
+
+```
+#### 参数
+<table><tr><td>参数</td><td>必须</td><td>类型</td><td>说明</td></tr><tr><td>pageURL </td><td>是</td><td> string </td><td>自定义虚拟PV页面的URL地址，填写以斜杠‘/’开头的相对路径，系统会自动补全域名</td></tr></table>
+## 3. ba 指令
+vue-ba 提供 track-event，track-pageview 两个指令，开发者可以直接在 html 模版中使用来统计网站数据
+
+### 3.1 track-event
+使用指令 v-track-event 监听事件， 通过 modifiers 指定事件类型，将自动为绑定元素添加事件监听，当事件触发调用统计代码。 如不指定事件，默认监听 click 事件。
+
+可通过逗号分隔的字符串或对象字面量传递参数，以字符串传递时请注意参数顺序，可参考trackEvent API。
+
+#### 用法
+```
+<button v-track-event.click="'category, action''"></button> // 统计click事件
+
+<button v-track-event="'category, action'"></button> // 统计click事件简写
+
+<input v-track-event.keypress="'category, action'"> // 统计keypress事件
+
+<button v-track-event="'category, action, opt_label, opt_value'"><button> // 以字符串传递参数
+
+<button v-track-event="{category:'event', action:'click'}"></button> // 以对象字面量传递参数
+```
+
+### 3.2 track-pageview
+使用指令 track-pageview 统计虚拟 PV ，一般可以配合 v-show 或 v-if 来统计局部动态视图的 PV。
+
+可通过逗号分隔的字符串或对象字面量传递参数，以字符串传递时请注意参数顺序，可参考trackPageview API
+用法
+
+```
+<div v-show="show" v-track-pageview="'/bar'">bar</div> //  跟踪 v-show 绑定元素的虚拟pv
+
+<div v-if="show" v-track-pageview="'/foo'">foo</div> // 跟踪 v-if 绑定元素的虚拟pv
+
+<div v-track-pageview="'/tar'"></div> // 以字符串指定受访页面和来源
+
+<div v-track-pageview="{pageURL:'/zoo''}"></div> // 以对象字面量指定受访页面和来源
+```
--- a/build/build.js
+++ b/build/build.js
@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
--- a/build/check-versions.js
+++ b/build/check-versions.js
@ -0,0 +1,48 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+var shell = require('shelljs')
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+]
+
+if (shell.which('npm')) {
+  versionRequirements.push({
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  })
+}
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}
--- a/build/dev-client.js
+++ b/build/dev-client.js
@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})
--- a/build/dev-server.js
+++ b/build/dev-server.js
@ -0,0 +1,91 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = process.env.NODE_ENV === 'testing'
+  ? require('./webpack.prod.conf')
+  : require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+var _resolve
+var readyPromise = new Promise(resolve => {
+  _resolve = resolve
+})
+
+console.log('> Starting dev server...')
+devMiddleware.waitUntilValid(() => {
+  console.log('> Listening at ' + uri + '\n')
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+  _resolve()
+})
+
+var server = app.listen(port)
+
+module.exports = {
+  ready: readyPromise,
+  close: () => {
+    server.close()
+  }
+}
--- a/build/utils.js
+++ b/build/utils.js
@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}
--- a/build/vue-loader.conf.js
+++ b/build/vue-loader.conf.js
@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}
--- a/build/webpack.base.conf.js
+++ b/build/webpack.base.conf.js
@ -0,0 +1,41 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    index: './src/index.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(js|vue)$/,
+        loader: 'eslint-loader',
+        enforce: 'pre',
+        include: [resolve('src'), resolve('test')],
+        options: {
+          formatter: require('eslint-friendly-formatter')
+        }
+      },
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      }
+    ]
+  }
+}
--- a/build/webpack.dev.conf.js
+++ b/build/webpack.dev.conf.js
@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})
--- a/build/webpack.prod.conf.js
+++ b/build/webpack.prod.conf.js
@ -0,0 +1,61 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+
+var env = process.env.NODE_ENV === 'testing'
+  ? require('../config/test.env')
+  : config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      },
+      sourceMap: true
+    }),
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
--- a/config/dev.env.js
+++ b/config/dev.env.js
@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
--- a/config/index.js
+++ b/config/index.js
@ -0,0 +1,38 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '/',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}
--- a/config/prod.env.js
+++ b/config/prod.env.js
@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: '"production"'
+}
--- a/config/test.env.js
+++ b/config/test.env.js
@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var devEnv = require('./dev.env')
+
+module.exports = merge(devEnv, {
+  NODE_ENV: '"testing"'
+})
--- a/dist/index.js
+++ b/dist/index.js
--- a/dist/index.js.map
+++ b/dist/index.js.map
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>vue-ba</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/package.json
+++ b/package.json
@ -0,0 +1,84 @@
+{
+  "name": "vue-ba",
+  "version": "1.2.4",
+  "description": "baidu analystics vue module",
+  "author": "minlingchao<mrminlingchao@gmail.com>",
+  "main": "dist/index",
+  "license": "MIT",
+  "keywords": [
+    "statistics",
+    "vue-plugin",
+    "baidu analystics",
+    ""
+  ],
+  "private": false,
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "start": "node build/dev-server.js",
+    "build": "node build/build.js",
+    "e2e": "node test/e2e/runner.js",
+    "test": "npm run e2e",
+    "lint": "eslint --ext .js,.vue src test/e2e/specs",
+    "release": "npm run build && npm publish"
+  },
+  "dependencies": {
+    "vue": "^2.3.3",
+    "deep-equal": "^1.0.1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-eslint": "^7.1.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.3.2",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.28.0",
+    "eslint": "^3.19.0",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.7.1",
+    "eslint-plugin-html": "^2.0.0",
+    "eslint-config-standard": "^6.2.1",
+    "eslint-plugin-promise": "^3.4.0",
+    "eslint-plugin-standard": "^2.0.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.11.1",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "chromedriver": "^2.27.2",
+    "cross-spawn": "^5.0.1",
+    "nightwatch": "^0.9.12",
+    "selenium-server": "^3.0.1",
+    "semver": "^5.3.0",
+    "shelljs": "^0.7.6",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.2.0",
+    "rimraf": "^2.6.0",
+    "url-loader": "^0.5.8",
+    "vue-loader": "^12.1.0",
+    "vue-style-loader": "^3.0.1",
+    "vue-template-compiler": "^2.3.3",
+    "webpack": "^2.6.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.18.0",
+    "webpack-merge": "^4.1.0"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
--- a/src/components/ba.js
+++ b/src/components/ba.js
@ -0,0 +1,27 @@
+import ba from '../index'
+
+export default {
+  name: 'ba',
+  props: {
+    events: {
+      type: Array,
+      default: () => []
+    },
+    pageviews: {
+      type: Array,
+      default: () => []
+    }
+  },
+  mounted () {
+    this.pageviews.forEach((pv) => {
+      let args = null
+      if (typeof pv === 'string') {
+        args = pv.split(',')
+        args.forEach((arg, i) => (args[i] = arg.trim()))
+      } else if (typeof pv === 'object') {
+        args = pv
+      }
+      ba.trackPageview(...args)
+    })
+  }
+}
--- a/src/components/ba.vue
+++ b/src/components/ba.vue
@ -0,0 +1,7 @@
+<template>
+  <div>
+  </div>
+</template>
+
+<script src="./ba.js">
+</script>
--- a/src/directives/auto-pageview.js
+++ b/src/directives/auto-pageview.js
@ -0,0 +1,10 @@
+import ba from '../index'
+import { notChanged } from './utils'
+export default function (el, binding) {
+  if (notChanged(binding)) return
+
+  let args = []
+  if (binding.value === false || binding.value === 'false') args.push(false)
+  else args.push(true)
+  ba.setAutoPageview(...args)
+}
--- a/src/directives/track-event.js
+++ b/src/directives/track-event.js
@ -0,0 +1,32 @@
+import ba from '../index'
+import { notChanged, isEmpty } from './utils'
+
+export default function (el, binding) {
+  if (notChanged(binding) || isEmpty(binding)) {
+    return
+  }
+
+  let args = []
+  let events = Object.keys(binding.modifiers).map(modifier => {
+    if (binding.modifiers[modifier]) {
+      return modifier
+    }
+  })
+
+  if (typeof binding.value === 'object') {
+    let value = binding.value
+    if (value.category) args.push(value.category)
+    if (value.action) args.push(value.action)
+    if (value.opt_label) args.push(value.opt_label)
+    if (value.opt_value) args.push(value.opt_value)
+  } else if (typeof binding.value === 'string') {
+    args = binding.value.split(',')
+    args.forEach((arg, i) => (args[i] = arg.trim()))
+  }
+
+  if (!events.length) events.push('click') // default  listen click
+
+  events.forEach((event) => {
+    el.addEventListener(event, () => ba.trackEvent(...args), false)
+  })
+}
--- a/src/directives/track-pageview.js
+++ b/src/directives/track-pageview.js
@ -0,0 +1,38 @@
+import ba from '../index'
+import { notChanged, isEmpty } from './utils'
+
+export let watch = []
+
+const trackPageview = {
+  bind (el, binding) {
+    let index = watch.findIndex(element => element === el)
+    let isWatched = index !== -1
+    if (el.style.display === 'none') {
+      if (!isWatched) watch.push(el)
+      return
+    } else {
+      if (isWatched) watch.splice(index, 1)
+    }
+
+    if (!isWatched && (notChanged(binding) || isEmpty(binding))) return
+
+    let args = []
+
+    if (typeof binding.value === 'object') {
+      let value = binding.value
+      if (value.pageURL) args.push(value.pageURL)
+    } else if (typeof binding.value === 'string' && binding.value) {
+      args = binding.value.split(',')
+      args.forEach((arg, i) => (arg[i] = arg.trim()))
+    }
+    ba.trackPageview(...args)
+  },
+  unbind (el, binding) {
+    let index = watch.findIndex(element => element === el)
+    if (index !== -1) watch.splice(index, 1)
+  }
+}
+
+trackPageview.update = trackPageview.bind
+
+export default trackPageview
--- a/src/directives/utils.js
+++ b/src/directives/utils.js
@ -0,0 +1,23 @@
+import deepEqual from 'deep-equal'
+
+/**
+ * if the binding value is equal to oldeValue
+ */
+export function notChanged (binding) {
+  if (binding.oldValue !== undefined) {
+    if (typeof binding.value === 'object') {
+      return deepEqual(binding.value, binding.oldValue)
+    } else {
+      return binding.value === binding.oldValue
+    }
+  } else {
+    return false
+  }
+}
+
+/**
+ * if the binding value is empty
+ */
+export function isEmpty (binding) {
+  return binding.value === '' || binding.value === undefined || binding.value === null
+}
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,82 @@
+import install from './install'
+
+const deferred = {}
+deferred.promise = new Promise((resolve, reject) => {
+  deferred.resolve = resolve
+  deferred.reject = reject
+})
+const methods = [
+  'trackPageview',
+  'trackEvent',
+  'setCustomVar'
+]
+
+const ba = {
+  /**
+  * internal user only
+  */
+  _cache: [],
+  /**
+   * internal user only, resolve the promise
+   */
+  _resolve () {
+    deferred.resolve()
+  },
+  /**
+     * internal user only, reject the promise
+     */
+  _reject () {
+    deferred.reject()
+  },
+
+    /**
+   * push the args into _czc, or _cache if the script is not loaded yet
+   */
+  _push (...args) {
+    this.debug(args)
+    if (window._hmt) {
+      window._hmt.push(...args)
+    } else {
+      this._cache.push(...args)
+    }
+  },
+  /**
+   * general method to create baidu analystics apis
+   */
+  _createMethod (method) {
+    return (...args) => {
+      this._push([`_${method}`, ...args])
+    }
+  },
+
+  /**
+   * debug
+   */
+  debug () {},
+  /**
+   * the plugins is ready when the script is loaded
+   */
+  ready () {
+    return deferred.promise
+  },
+  /**
+   * install function
+   */
+
+  install,
+  /**
+     * patch up to create new api
+     */
+  patch (method) {
+    this[method] = this._createMethod(method)
+  }
+}
+
+// uweb apis
+methods.forEach((method) => (ba[method] = ba._createMethod(method)))
+
+if (window.Vue) {
+  window.ba = ba
+}
+
+export default ba
--- a/src/install.js
+++ b/src/install.js
@ -0,0 +1,57 @@
+import autoPageview from './directives/auto-pageview'
+import trackEvent from '././directives/track-event'
+import trackPageview from '././directives/track-pageview'
+export default function install (Vue, options) {
+  if (this.install.installed) return
+
+  if (options.debug) {
+    this.debug = console.log
+  } else {
+    this.debug = () => {}
+  }
+
+  let siteId = null
+
+  if (typeof options === 'object') {
+    siteId = options.siteId
+    if (options.autoPageview !== false) {
+      options.autoPageview = true
+    }
+  } else {
+    siteId = options
+  }
+
+  if (!siteId) {
+    return console.error(' siteId is missing')
+  }
+
+  this.install.installed = true
+  // insert baidu analystics scripts
+  const script = document.createElement('script')
+  const src = `https://hm.baidu.com/hm.js?` + siteId
+  const realSrc = options.src || src
+  script.innerHTML = 'var _hmt = _hmt || []; (function(){var hm = document.createElement(\'script\');hm.src="' +
+  realSrc +
+  '";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})()'
+  script.onload = () => {
+    // if the global object is exist, resolve the promise, otherwise reject it
+    if (window._hmt) {
+      this._resolve()
+    } else {
+      console.error('loading ba statistics script failed, please check src and siteId')
+      return this._reject()
+    }
+    this._cache.forEach((cache) => {
+      window._hmt.push(cache)
+    })
+    this._cache = []
+  }
+  document.body.appendChild(script)
+  Object.defineProperty(Vue.prototype, '$ba', {
+    get: () => this
+  })
+
+  Vue.directive('auto-pageview', autoPageview)
+  Vue.directive('track-event', trackEvent)
+  Vue.directive('track-pageview', trackPageview)
+}
--- a/static/.gitkeep
+++ b/static/.gitkeep
--- a/test/e2e/custom-assertions/elementCount.js
+++ b/test/e2e/custom-assertions/elementCount.js
@ -0,0 +1,26 @@
+// A custom Nightwatch assertion.
+// the name of the method is the filename.
+// can be used in tests like this:
+//
+//   browser.assert.elementCount(selector, count)
+//
+// for how to write custom assertions see
+// http://nightwatchjs.org/guide#writing-custom-assertions
+exports.assertion = function (selector, count) {
+  this.message = 'Testing if element <' + selector + '> has count: ' + count
+  this.expected = count
+  this.pass = function (val) {
+    return val === this.expected
+  }
+  this.value = function (res) {
+    return res.value
+  }
+  this.command = function (cb) {
+    var self = this
+    return this.api.execute(function (selector) {
+      return document.querySelectorAll(selector).length
+    }, [selector], function (res) {
+      cb.call(self, res)
+    })
+  }
+}
--- a/test/e2e/nightwatch.conf.js
+++ b/test/e2e/nightwatch.conf.js
@ -0,0 +1,46 @@
+require('babel-register')
+var config = require('../../config')
+
+// http://nightwatchjs.org/gettingstarted#settings-file
+module.exports = {
+  src_folders: ['test/e2e/specs'],
+  output_folder: 'test/e2e/reports',
+  custom_assertions_path: ['test/e2e/custom-assertions'],
+
+  selenium: {
+    start_process: true,
+    server_path: require('selenium-server').path,
+    host: '127.0.0.1',
+    port: 4444,
+    cli_args: {
+      'webdriver.chrome.driver': require('chromedriver').path
+    }
+  },
+
+  test_settings: {
+    default: {
+      selenium_port: 4444,
+      selenium_host: 'localhost',
+      silent: true,
+      globals: {
+        devServerURL: 'http://localhost:' + (process.env.PORT || config.dev.port)
+      }
+    },
+
+    chrome: {
+      desiredCapabilities: {
+        browserName: 'chrome',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    },
+
+    firefox: {
+      desiredCapabilities: {
+        browserName: 'firefox',
+        javascriptEnabled: true,
+        acceptSslCerts: true
+      }
+    }
+  }
+}
--- a/test/e2e/runner.js
+++ b/test/e2e/runner.js
@ -0,0 +1,33 @@
+// 1. start the dev server using production config
+process.env.NODE_ENV = 'testing'
+var server = require('../../build/dev-server.js')
+
+server.ready.then(() => {
+  // 2. run the nightwatch test suite against it
+  // to run in additional browsers:
+  //    1. add an entry in test/e2e/nightwatch.conf.json under "test_settings"
+  //    2. add it to the --env flag below
+  // or override the environment flag, for example: `npm run e2e -- --env chrome,firefox`
+  // For more information on Nightwatch's config file, see
+  // http://nightwatchjs.org/guide#settings-file
+  var opts = process.argv.slice(2)
+  if (opts.indexOf('--config') === -1) {
+    opts = opts.concat(['--config', 'test/e2e/nightwatch.conf.js'])
+  }
+  if (opts.indexOf('--env') === -1) {
+    opts = opts.concat(['--env', 'chrome'])
+  }
+
+  var spawn = require('cross-spawn')
+  var runner = spawn('./node_modules/.bin/nightwatch', opts, { stdio: 'inherit' })
+
+  runner.on('exit', function (code) {
+    server.close()
+    process.exit(code)
+  })
+
+  runner.on('error', function (err) {
+    server.close()
+    throw err
+  })
+})
--- a/test/e2e/specs/test.js
+++ b/test/e2e/specs/test.js
@ -0,0 +1,19 @@
+// For authoring Nightwatch tests, see
+// http://nightwatchjs.org/guide#usage
+
+module.exports = {
+  'default e2e tests': function (browser) {
+    // automatically uses dev Server port from /config.index.js
+    // default: http://localhost:8080
+    // see nightwatch.conf.js
+    const devServer = browser.globals.devServerURL
+
+    browser
+      .url(devServer)
+      .waitForElementVisible('#app', 5000)
+      .assert.elementPresent('.hello')
+      .assert.containsText('h1', 'Welcome to Your Vue.js App')
+      .assert.elementCount('img', 1)
+      .end()
+  }
+}