diff --git a/.eslintrc.js b/.eslintrc.js
new file mode 100644
index 0000000..0e60107
--- /dev/null
+++ b/.eslintrc.js
@@ -0,0 +1,14 @@
+module.exports = {
+ root: true,
+ env: {
+ browser: true
+ },
+ parser: '@typescript-eslint/parser',
+ parserOptions: {
+ ecmaVersion: 2020
+ },
+ plugins: [
+ '@typescript-eslint'
+ ],
+ rules: {}
+};
diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index e21e1e0..336d2fa 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
-custom: https://git.io/Sponsor
+custom: [chengpeiquan](https://github.com/chengpeiquan/sponsor)
diff --git a/README.md b/README.md
index c975eba..dcee042 100644
--- a/README.md
+++ b/README.md
@@ -1,9 +1,9 @@
vue-baidu-analytics 使用说明
===
-基于Vue开发的百度统计插件,可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面`,以及 `VuePress` 项目上使用,使用本插件的项目需要引入 `Vue Router`。
+基于 Vue 开发的百度统计插件,可以在 `Vue-CLI 脚手架项目` 或者 `引入了 Vue 相关 CDN 的普通页面`,以及 `VuePress` 项目上使用,使用本插件的项目需要引入 `Vue Router`。
-> @v2.0版本更新:
最新版支持 Vue 3.x,同时兼容 Vue 2.x 使用,具体使用方法请看下方说明及demo。
对Vue 3.0感兴趣,但还在观望的同学,欢迎阅读我踩坑总结的:[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) (持续更新ing)
+> v2.0 版本更新:
最新版支持 Vue 3.x,同时兼容 Vue 2.x 使用,具体使用方法请看下方说明及demo。
对 Vue 3.0 感兴趣,但还在观望的同学,欢迎阅读我踩坑总结的:[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) (持续更新ing)
## 功能
@@ -29,13 +29,13 @@ Vue 3.0 版本:[vue-baidu-analytics demo for Vue 3.x](https://chengpeiquan.git
## 安装
-方式一:通过npm安装
+方式一:通过 NPM 安装
```
npm install vue-baidu-analytics --save-dev
```
-方式二:通过cdn安装
+方式二:通过 CDN 安装
```html
@@ -46,20 +46,20 @@ npm install vue-baidu-analytics --save-dev
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
router|是|object|Vue Router,本插件基于路由使用
-siteIdList|是|string[]|百度统计的站点id列表,item为站点id
只有一个站点需要上报就保留一个item即可
-isDebug|否|boolean|是否开启debug模式,默认 `false`
开启后会在控制台打印上报信息,**上线前记得关闭**
+siteIdList|是|string[]|百度统计的站点 id 列表,item 为站点 id
只有一个站点需要上报就保留一个 item 即可
+isDebug|否|boolean|是否开启 debug 模式,默认 `false`
开启后会在控制台打印上报信息,**上线前记得关闭**
## 使用
-通过npm安装的项目,需要先在 `main.js` 里引入插件(通过cdn则无需该步骤)。
+通过 NPM 安装的项目,需要先在 `main.js` 里引入插件(通过 CDN 则无需该步骤)。
```js
import baiduAnalytics from 'vue-baidu-analytics'
```
-安装插件后,在 `main.js` 引入以下代码(注意区分Vue2.0和Vue3.0的用法区别),即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。
+安装插件后,在 `main.js` 引入以下代码(注意区分 Vue 2.0 和 Vue 3.0 的用法区别),即可开启自动上报功能,首次访问页面会部署统计代码并提交第一次访问数据上报。
-后续在路由切换过程中,也会根据路由的切换提交相应的url信息到友盟统计。
+后续在路由切换过程中,也会根据路由的切换提交相应的url信息到百度统计。
### 在 Vue 2.0 里使用
@@ -128,21 +128,21 @@ export default ({ Vue, router }) => {
};
```
-可在开发环境打开debug模式了解相关的上报情况(上线前记得关闭debug)。
+可在开发环境打开 debug 模式了解相关的上报情况(上线前记得关闭 debug )。
## 方法
-插件目前封装了两个常用的api,统一挂载到Vue实例上的 `$pushBAIDU` 去调用。
+插件目前封装了两个常用的 API ,统一挂载到 Vue 实例上的 `$pushBAIDU` 去调用。
-注:如果配置了多个站点id,会同时上报给所有站点。
+注:如果配置了多个站点 id ,会同时上报给所有站点。
-### 手动上报页面PV
+### 手动上报页面 PV
-api名称|功能说明
+API 名称|功能说明
:-:|-
pv|手动执行PV数据上报
-**api参数**
+**API 参数**
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
@@ -158,7 +158,7 @@ this.$pushBAIDU.pv(this.pageUrl);
在 Vue 3.0 里使用
-(使用3.0的生命周期,需要遵循Vue3的规范,引入一个Vue自带的代理组件,并写在 `setup` 里执行)
+(使用 3.0 的生命周期,需要遵循 Vue3 的规范,引入一个 Vue 自带的代理组件,并写在 `setup` 里执行)
```js
const { proxy } = getCurrentInstance();
@@ -168,18 +168,18 @@ proxy.$pushBAIDU.pv(pageUrl.value);
### 手动上报事件分析
-api名称|功能说明
+API 名称|功能说明
:-:|-
event|手动执行事件分析数据上报
-**api参数**
+**API 参数**
参数|是否必填|参数类型|参数说明
:-:|:-:|:-:|-
category|是|string|产生该事件的位置名称,比如 `首页banner`
action|是|string|产生该事件的行为描述,比如 `点击`
-label|否|string|产生该事件的标签名称,可以用来记录事件子id,比如 `bannerId_123`,默认为空
-value|否|number|该事件的分值,默认0
+label|否|string|产生该事件的标签名称,可以用来记录事件子 id,比如 `bannerId_123`,默认为空
+value|否|number|该事件的分值,默认 0
**使用示范**
@@ -196,7 +196,7 @@ this.$pushBAIDU.event(
在 Vue 3.0 里使用
-(使用3.0的生命周期,需要遵循Vue3的规范,引入一个Vue自带的代理组件,并写在 `setup` 里执行)
+(使用 3.0 的生命周期,需要遵循 Vue3 的规范,引入一个 Vue 自带的代理组件,并写在 `setup` 里执行)
```js
const { proxy } = getCurrentInstance();
@@ -207,4 +207,4 @@ proxy.$pushBAIDU.event(
label.value,
value.value
);
-```
\ No newline at end of file
+```
diff --git a/demo/js/main-for-vue2.js b/demo/js/main-for-vue2.js
index 62881a9..a18e001 100644
--- a/demo/js/main-for-vue2.js
+++ b/demo/js/main-for-vue2.js
@@ -1,4 +1,4 @@
-/**
+/**
* 初始化路由
* routes是来自 js/routes.js 里面的配置
*/
@@ -9,21 +9,21 @@ const router = new VueRouter({
});
-/**
+/**
* 引入统计插件
+ * @description 自 v2.1.0 版本开始,需要使用 .default 去激活插件
*/
-Vue.use(baiduAnalytics, {
+Vue.use(baiduAnalytics.default, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
- 'bbbbbbbbbbbbbbbbbbb',
- 'ccccccccccccccccccc'
+ 'bbbbbbbbbbbbbbbbbbb'
],
isDebug: true
});
-/**
+/**
* 初始化Vue
*/
const app = new Vue({
@@ -35,17 +35,43 @@ const app = new Vue({
category: '',
action: '',
label: '',
- value: ''
+ value: '',
+
+ // 也可以绑定一个钩子变量去使用
+ baidu: baiduAnalytics.usePush()
}
},
mounted () {
+ this.baidu.pv('/use-push-api/?from=mounted');
},
methods: {
+ /**
+ * 提交 pv
+ * @description 支持两种推送方式
+ */
pv () {
+ // 使用默认全局 API
this.$pushBAIDU.pv(this.pageUrl);
+
+ // 使用钩子 API
+ // this.baidu.pv(this.pageUrl);
},
+
+ /**
+ * 提交事件
+ * @description 支持两种推送方式
+ */
event () {
- this.$pushBAIDU.event(
+ // 使用默认全局 API
+ // this.$pushBAIDU.event(
+ // this.category,
+ // this.action,
+ // this.label,
+ // this.value
+ // );
+
+ // 使用钩子 API
+ this.baidu.event(
this.category,
this.action,
this.label,
@@ -53,4 +79,4 @@ const app = new Vue({
);
}
}
-});
\ No newline at end of file
+});
diff --git a/demo/js/main-for-vue3.js b/demo/js/main-for-vue3.js
index 013c5c2..29297ee 100644
--- a/demo/js/main-for-vue3.js
+++ b/demo/js/main-for-vue3.js
@@ -1,11 +1,12 @@
-/**
+/**
* 导入需要用到的组件
*/
const { createRouter, createWebHashHistory } = VueRouter;
const { createApp, getCurrentInstance, ref } = Vue;
+const { usePush } = baiduAnalytics;
-/**
+/**
* 初始化路由
* routes是来自 js/routes.js 里面的配置
*/
@@ -17,13 +18,22 @@ const router = createRouter({
});
-/**
+/**
* 创建实例
*/
const app = {
setup () {
- // 插件要用到的一个代理组件
- const { proxy } = getCurrentInstance();
+ /**
+ * 新的推荐方式
+ * @description 创建一个钩子变量去使用,更适合于 TypeScript 项目
+ */
+ const baidu = usePush();
+
+ /**
+ * 原来的方式
+ * @description 用代理组件去操作,对 TS 项目不够友好
+ */
+ // const { proxy } = getCurrentInstance();
// 初始化要用到的数据
const pageUrl = ref('');
@@ -32,19 +42,38 @@ const app = {
const label = ref('');
const value = ref('');
- // 提交pv的操作
+ /**
+ * 提交 pv
+ * @description 支持两种推送方式
+ */
const pv = () => {
- proxy.$pushBAIDU.pv(pageUrl.value);
+ // 通过钩子去操作
+ baidu.pv(pageUrl.value);
+
+ // 通过代理组件去操作
+ // proxy.$pushBAIDU.pv(pageUrl.value);
}
- // 提交事件的操作
+ /**
+ * 提交事件
+ * @description 支持两种推送方式
+ */
const event = () => {
- proxy.$pushBAIDU.event(
+ // 通过钩子去操作
+ baidu.event(
category.value,
action.value,
label.value,
value.value
);
+
+ // 通过代理组件去操作
+ // proxy.$pushBAIDU.event(
+ // category.value,
+ // action.value,
+ // label.value,
+ // value.value
+ // );
}
// Vue 3.0 需要把模板要用到的东西 return 出去
@@ -64,7 +93,7 @@ const app = {
};
-/**
+/**
* 初始化Vue
*/
createApp(app)
@@ -72,15 +101,14 @@ createApp(app)
.use(router)
// 启动插件
- .use(baiduAnalytics, {
+ .use(baiduAnalytics.default, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
- 'bbbbbbbbbbbbbbbbbbb',
- 'ccccccccccccccccccc'
+ 'bbbbbbbbbbbbbbbbbbb'
],
isDebug: true
})
-
+
// 挂载到节点上
- .mount('#app');
\ No newline at end of file
+ .mount('#app');
diff --git a/demo/vue2.html b/demo/vue2.html
index b6ac963..4e06c04 100644
--- a/demo/vue2.html
+++ b/demo/vue2.html
@@ -4,9 +4,9 @@