# vue-fx

> [![NPM version](https://img.shields.io/npm/v/vue-fx.svg?style=flat-square)](https://npmjs.com/package/vue-fx)

Latest version **1.4.1** (published 2018-08-22) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-fx
pnpm add vue-fx
yarn add vue-fx
bun add vue-fx
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.4.1 |
| Published | 2018-08-22 |
| First published | 2017-10-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 59.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | wemlion |
| Maintainers | wemlion |

## Links

- npm: https://www.npmjs.com/package/vue-fx
- Repository: https://github.com/AngusFu/vue-fx
- Homepage: https://github.com/AngusFu/vue-fx#readme
- Issues: https://github.com/AngusFu/vue-fx/issues
- npm.io page: https://npm.io/package/vue-fx

## Recent versions

- 1.4.1 (latest) — 2018-08-22
- 1.4.0 — 2017-11-02
- 1.3.0 — 2017-11-01
- 1.2.0 — 2017-10-31
- 1.1.0 — 2017-10-30
- 1.0.0 — 2017-10-30

## README

# vue-fx

[![NPM version](https://img.shields.io/npm/v/vue-fx.svg?style=flat-square)](https://npmjs.com/package/vue-fx)

[分析](https://fenxi.360.cn/login/present) 单页应用插件。

## 代码安装

```bash
yarn add vue-fx
# 或
npm install vue-fx --save
```

> :warning: 本模块将根据 domainId 加载统计脚本。使用本模块无需自行安装基础流量代码。

## 使用方法

### Vue-Router

如果项目使用了 [Vue-Router](https://router.vuejs.org/zh-cn)，请按照如下代码配置：

```js
import VueRouter from 'vue-router'
import Vue360Analysis from 'vue-fx'

// ...

const router = new VueRouter({
  routes: [
    { path: '/foo', component: Foo}
    { path: '/bar', component: Bar},
  ]
})

Vue.use(VueRouter)

// domainId 是站点 id
// 可以通过“站点管理 => 获取代码” 找到
Vue360Analysis(router, domainId)

new Vue({ router }).$mount('#app')
```

#### Demo

- [Vue and VueRouter](https://code.h5jun.com/desax)

### 非 Vue-Router

如果不是 Vue 项目，或没有使用 Vue-Router，则可以按照如下示例引入（请按照项目实际情况处理）：

```js
import Vue360Analysis from 'vue-fx'

Vue360Analysis(
  function (collect) {
    window.onhashchange = () => {
      collect(location.pathname + location.hash)
    }
  },
  domainId
)
```

请根据项目实际情况（使用的框架和路由工具），在相应的位置（钩子/guard/回调/生命周期）调用。

一种简便的方法如下，下面是示意：

```js
const collect = Vue360Analysis(fn => fn, domainId)

// component A
afterRender () {
  collect('/A')
}

// componentB
afterRender () {}
  collect('/B')
}
```

#### DEMO

- [React hash mode](https://code.h5jun.com/tusa/)
- [React Router 2](https://code.h5jun.com/mexi)

---
Inspired by [vue-ga](https://github.com/egoist/vue-ga/).

---
_Source: https://npm.io/package/vue-fx · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._