# bonree-agent-vue-plugin

bonree-agent-vue-plugin是适配于采集Vue框架数据的插件。

### 如何使用

- 安装

```js
  npm i bonree-agent-vue-plugin --save
```

- 导出

```js
  import {BonreeVuePlugin} from 'bonree-agent-vue-plugin'
```
### 在框架中导入原生使用
- Vue2代码中使用

```js
  import Vue from 'vue'
  import {BonreeStart} from './BonreeSDK_JS.debug.esm' 
  import {BonreeVuePlugin} from 'bonree-agent-vue-plugin'
  Vue.use(BonreeVuePlugin)
  BonreeStart({
    'uploadAddrHttps':'sdkupload.bonree.com',
 	'uploadAddrHttp':'http://oneupload.bonree.com/RUM/upload', 
     'reqBodyKey':['a'],
    'reqURLKey':['b'],
    'reqHeaderKey':['c'],
    'enableLogger':true,
    'isDebug': false,
})
```
- Vue3代码中使用
```js
  import {createApp} from 'vue';
  import App from './App.vue';
  import {BonreeStart} from './BonreeSDK_JS.debug.esm' 
  import {BonreeVuePlugin} from 'bonree-agent-vue-plugin'
  createApp(App).use(BonreeVuePlugin)
  BonreeStart({
    'uploadAddrHttps':'sdkupload.bonree.com',
 	'uploadAddrHttp':'http://oneupload.bonree.com/RUM/upload', 
     'reqBodyKey':['a'],
    'reqURLKey':['b'],
    'reqHeaderKey':['c'],
    'enableLogger':true,
    'isDebug': false,
})
```
### 在HTML标签中导入原生使用
- 首先需要在script标签中引入原生
```js
  <script
     id="BonreeAgent"
     src="./js/BonreeSDK_JS.min.js"
     data='{"appId":"203d83434b6f4247923025cf849erfc3",
         "uploadAddrHttps": "https://oneupload.bonree.com/RUM/upload",
         "uploadAddrHttp": "http://oneupload.bonree.com/RUM/upload"}'
></script>
```
- 然后在vue框架中使用
- Vue2代码中使用
```js
  import Vue from 'vue' 
  import {BonreeVuePlugin} from 'bonree-agent-vue-plugin'
  Vue.use(BonreeVuePlugin)
```
- Vue3代码中使用
```js
  import {createApp} from 'vue';
  import App from './App.vue';
  import {BonreeVuePlugin} from 'bonree-agent-vue-plugin'
  createApp(App).use(BonreeVuePlugin)
```
### 注意：
  vue.config.errorHandler自定义需要在插件使用之前