diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3c3629e
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+node_modules
diff --git a/README.md b/README.md
index 4fe94bd..e569134 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,7 @@ vue-baidu-analytics 使用说明
基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
-注意：本插件在 `1.0.0` 版本的部分参数和api现在有所弃用，请按照当前最新文档说明使用新版本，或者安装以前的 `1.0.0` 旧版本使用。
+> @v2.0版本更新：
最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。
对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
## 功能
@@ -17,11 +17,29 @@ vue-baidu-analytics 使用说明
* 支持手动提交事件分析上报
+* 自动识别Vue版本，自动适配Vue 2.0/3.0使用（插件2.0版本新增）
+
## 预览
demo已开启debug模式，可开启控制台查看上报情况。
-点击预览：[vue-baidu-analytics demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/ "vue-baidu-analytics demo")
+Vue 2.0 版本：[vue-baidu-analytics demo for Vue 2.x](https://chengpeiquan.github.io/vue-baidu-analytics/demo/vue2.html "vue-baidu-analytics demo for Vue 2.x")
+
+Vue 3.0 版本：[vue-baidu-analytics demo for Vue 3.x](https://chengpeiquan.github.io/vue-baidu-analytics/demo/vue3.html "vue-baidu-analytics demo for Vue 3.x")
+
+## 安装
+
+方式一：通过npm安装
+
+```
+npm install vue-baidu-analytics --save-dev
+```
+
+方式二：通过cdn安装
+
+```html
+
+```
## 参数
@@ -31,20 +49,6 @@ router|是|object|Vue Router，本插件基于路由使用
siteIdList|是|object Array|百度统计的站点id列表，item为站点id
只有一个站点需要上报就保留一个item即可
isDebug|否|boolean|是否开启debug模式，默认 `false`
开启后会在控制台打印上报信息，**上线前记得关闭**
-## 安装
-
-### 通过npm安装
-
-```
-npm install vue-baidu-analytics --save-dev
-```
-
-### 通过cdn安装
-
-```html
-
-```
-
## 使用
通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
@@ -53,10 +57,14 @@ npm install vue-baidu-analytics --save-dev
import baiduAnalytics from 'vue-baidu-analytics'
```
-安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
+安装插件后，在 `main.js` 引入以下代码（注意区分Vue2.0和Vue3.0的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
+### 在 Vue 2.0 里使用
+
+可参考demo：[main.js - Vue 2.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue2.js)
+
```js
Vue.use(baiduAnalytics, {
router: router,
@@ -69,6 +77,33 @@ Vue.use(baiduAnalytics, {
});
```
+### 在 Vue 3.0 里使用
+
+可参考demo：[main.js - Vue 3.0 demo](https://chengpeiquan.github.io/vue-baidu-analytics/demo/js/main-for-vue3.js)
+
+```js
+/**
+ * 初始化Vue
+ */
+createApp(app)
+ // 启动路由
+ .use(router)
+
+ // 启动插件
+ .use(baiduAnalytics, {
+ router: router,
+ siteIdList: [
+ 'aaaaaaaaaaaaaaaaaaa',
+ 'bbbbbbbbbbbbbbbbbbb',
+ 'ccccccccccccccccccc'
+ ],
+ isDebug: true
+ })
+
+ // 挂载到节点上
+ .mount('#app');
+```
+
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
## 方法
@@ -91,17 +126,20 @@ pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径手动上报PV
-```
-
-在method里使用
+在 Vue 2.0 里使用
```js
-// this是Vue实例
-this.$pushBAIDU.pv('/home');
+this.$pushBAIDU.pv(this.pageUrl);
+```
+
+在 Vue 3.0 里使用
+
+（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
+
+```js
+const { proxy } = getCurrentInstance();
+
+proxy.$pushBAIDU.pv(pageUrl.value);
```
### 手动上报事件分析
@@ -121,15 +159,28 @@ value|否|number|该事件的分值，默认0
**使用示范**
-在template里使用（比如：点击了一个id为123的首页banner）
-
-```html
-
-```
-
-在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
+在 Vue 2.0 里使用
```js
-// this是Vue实例
-this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
+this.$pushBAIDU.event(
+ this.category,
+ this.action,
+ this.label,
+ this.value
+);
+```
+
+在 Vue 3.0 里使用
+
+（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
+
+```js
+const { proxy } = getCurrentInstance();
+
+proxy.$pushBAIDU.event(
+ category.value,
+ action.value,
+ label.value,
+ value.value
+);
```
\ No newline at end of file
diff --git a/demo/css/style.css b/demo/css/style.css
new file mode 100644
index 0000000..27b96d1
--- /dev/null
+++ b/demo/css/style.css
@@ -0,0 +1,60 @@
+#app,
+.section {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+}
+.section {
+ margin-bottom: 40px;
+}
+.title {
+ font-size: 40px;
+ color: #000;
+}
+.link {
+ color: #666;
+ text-decoration: none;
+}
+.link:hover {
+ color: #000;
+}
+.nav {
+ margin-bottom: 20px;
+}
+.nav .item {
+ color: #666;
+ margin: 0 10px 20px;
+}
+.nav .cur {
+ color: #000;
+ font-weight: bold;
+}
+.label {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ margin-bottom: 20px;
+}
+.text {
+ display: flex;
+ justify-content: flex-end;
+ align-items: center;
+ width: 60px;
+ font-size: 14px;
+ color: #333;
+ margin-right: 20px;
+}
+.input {
+ display: flex;
+ align-items: center;
+ width: 240px;
+ height: 40px;
+ font-size: 14px;
+ box-sizing: border-box;
+ padding: 0 10px;
+}
+.button {
+ padding: 5px 20px;
+ cursor: pointer;
+}
\ No newline at end of file
diff --git a/demo/js/main-for-vue2.js b/demo/js/main-for-vue2.js
new file mode 100644
index 0000000..62881a9
--- /dev/null
+++ b/demo/js/main-for-vue2.js
@@ -0,0 +1,56 @@
+/**
+ * 初始化路由
+ * routes是来自 js/routes.js 里面的配置
+ */
+const router = new VueRouter({
+ routes,
+ linkActiveClass: 'cur',
+ linkExactActiveClass: 'cur'
+});
+
+
+/**
+ * 引入统计插件
+ */
+Vue.use(baiduAnalytics, {
+ router: router,
+ siteIdList: [
+ 'aaaaaaaaaaaaaaaaaaa',
+ 'bbbbbbbbbbbbbbbbbbb',
+ 'ccccccccccccccccccc'
+ ],
+ isDebug: true
+});
+
+
+/**
+ * 初始化Vue
+ */
+const app = new Vue({
+ el: '#app',
+ router,
+ data () {
+ return {
+ pageUrl: '',
+ category: '',
+ action: '',
+ label: '',
+ value: ''
+ }
+ },
+ mounted () {
+ },
+ methods: {
+ pv () {
+ this.$pushBAIDU.pv(this.pageUrl);
+ },
+ event () {
+ this.$pushBAIDU.event(
+ this.category,
+ this.action,
+ this.label,
+ this.value
+ );
+ }
+ }
+});
\ No newline at end of file
diff --git a/demo/js/main-for-vue3.js b/demo/js/main-for-vue3.js
new file mode 100644
index 0000000..013c5c2
--- /dev/null
+++ b/demo/js/main-for-vue3.js
@@ -0,0 +1,86 @@
+/**
+ * 导入需要用到的组件
+ */
+const { createRouter, createWebHashHistory } = VueRouter;
+const { createApp, getCurrentInstance, ref } = Vue;
+
+
+/**
+ * 初始化路由
+ * routes是来自 js/routes.js 里面的配置
+ */
+const router = createRouter({
+ history: createWebHashHistory(),
+ routes,
+ linkActiveClass: 'cur',
+ linkExactActiveClass: 'cur'
+});
+
+
+/**
+ * 创建实例
+ */
+const app = {
+ setup () {
+ // 插件要用到的一个代理组件
+ const { proxy } = getCurrentInstance();
+
+ // 初始化要用到的数据
+ const pageUrl = ref('');
+ const category = ref('');
+ const action = ref('');
+ const label = ref('');
+ const value = ref('');
+
+ // 提交pv的操作
+ const pv = () => {
+ proxy.$pushBAIDU.pv(pageUrl.value);
+ }
+
+ // 提交事件的操作
+ const event = () => {
+ proxy.$pushBAIDU.event(
+ category.value,
+ action.value,
+ label.value,
+ value.value
+ );
+ }
+
+ // Vue 3.0 需要把模板要用到的东西 return 出去
+ return {
+ // 数据
+ pageUrl,
+ category,
+ action,
+ label,
+ value,
+
+ // 方法
+ pv,
+ event
+ }
+ }
+};
+
+
+/**
+ * 初始化Vue
+ */
+createApp(app)
+ // 启动路由
+ .use(router)
+
+ // 启动插件
+ .use(baiduAnalytics, {
+ router: router,
+ siteIdList: [
+ 'aaaaaaaaaaaaaaaaaaa',
+ 'bbbbbbbbbbbbbbbbbbb',
+ 'ccccccccccccccccccc'
+ ],
+ isDebug: true
+ })
+
+ // 挂载到节点上
+ .mount('#app');
\ No newline at end of file
diff --git a/demo/js/main.js b/demo/js/main.js
deleted file mode 100644
index 0049ca0..0000000
--- a/demo/js/main.js
+++ /dev/null
@@ -1,68 +0,0 @@
-// 定义路由信息
-const routes = [
- {
- path: '/',
- redirect: '/page1'
- },
- {
- path: '/page1',
- component: {
- template: '当前是 Page1 的路由
'
- }
- },
- {
- path: '/page2',
- component: {
- template: '当前是 Page2 的路由
'
- }
- },
- {
- path: '/page3',
- component: {
- template: '当前是 Page3 的路由
'
- }
- }
-];
-
-// 初始化路由
-const router = new VueRouter({
- routes,
- linkActiveClass: 'cur',
- linkExactActiveClass: 'cur'
-});
-
-// 引入统计插件
-Vue.use(baiduAnalytics, {
- router: router,
- siteIdList: [
- 'aaaaaaaaaaaaaaaaaaa',
- 'bbbbbbbbbbbbbbbbbbb',
- 'ccccccccccccccccccc'
- ],
- isDebug: true
-});
-
-// 初始化Vue
-const app = new Vue({
- el: '#app',
- router,
- data () {
- return {
- pageUrl: '',
- category: '',
- action: '',
- label: '',
- value: ''
- }
- },
- mounted () {
- },
- methods: {
- pv () {
- this.$pushBAIDU.pv(this.pageUrl);
- },
- event () {
- this.$pushBAIDU.event(this.category, this.action, this.label, this.value);
- }
- }
-});
\ No newline at end of file
diff --git a/demo/js/routes.js b/demo/js/routes.js
new file mode 100644
index 0000000..f39c2b5
--- /dev/null
+++ b/demo/js/routes.js
@@ -0,0 +1,27 @@
+/**
+ * 定义路由信息
+ */
+const routes = [
+ {
+ path: '/',
+ redirect: '/page1'
+ },
+ {
+ path: '/page1',
+ component: {
+ template: '当前是 Page1 的路由
'
+ }
+ },
+ {
+ path: '/page2',
+ component: {
+ template: '当前是 Page2 的路由
'
+ }
+ },
+ {
+ path: '/page3',
+ component: {
+ template: '当前是 Page3 的路由
'
+ }
+ }
+];
\ No newline at end of file
diff --git a/demo/index.html b/demo/vue2.html
similarity index 61%
rename from demo/index.html
rename to demo/vue2.html
index 0396566..b6ac963 100644
--- a/demo/index.html
+++ b/demo/vue2.html
@@ -3,64 +3,19 @@
- vue baidu analytics demo
-
-
-
+ [Vue2] vue baidu analytics demo
+
+
+
-
Hello App!
+
+
切换路由自动上报测试
@@ -104,7 +59,8 @@