Merge pull request #5 from chengpeiquan/develop

Develop

Author: chengpeiquan

.gitignore

@@ -0,0 +1 @@
+node_modules

README.md

@@ -3,6 +3,8 @@ vue-cnzz-analytics 使用说明
 
 基于Vue开发的CNZZ统计插件（友盟统计），可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
 
+> @v2.0版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
+
 ## 功能
 
 * 异步载入CNZZ统计脚本，不再因等待加载统计代码而影响页面渲染速度
@@ -15,34 +17,38 @@ vue-cnzz-analytics 使用说明
 
 * 支持手动提交事件分析上报
 
+* 自动识别Vue版本，自动适配Vue 2.0/3.0使用（插件2.0版本新增）
+
 ## 预览
 
 demo已开启debug模式，可开启控制台查看上报情况。
 
-点击预览：[vue-cnzz-analytics demo](https://chengpeiquan.github.io/vue-cnzz-analytics/demo/ "vue-cnzz-analytics demo")
-
-## 参数
+Vue 2.0 版本：[vue-cnzz-analytics demo for Vue 2.x](https://chengpeiquan.github.io/vue-cnzz-analytics/demo/vue2.html "vue-cnzz-analytics demo for Vue 2.x")
 
-参数|是否必填|参数类型|参数说明
-:-:|:-:|:-:|-
-router|是|object|Vue Router，本插件基于路由使用
-siteIdList|是|object Array|CNZZ统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
-isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
+Vue 3.0 版本：[vue-cnzz-analytics demo for Vue 3.x](https://chengpeiquan.github.io/vue-cnzz-analytics/demo/vue3.html "vue-cnzz-analytics demo for Vue 3.x")
 
 ## 安装
 
-### 通过npm安装
+方式一：通过npm安装
 
 ```
 npm install vue-cnzz-analytics --save-dev
 ```
 
-### 通过cdn安装
+方式二：通过cdn安装
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue-cnzz-analytics/dist/vue-cnzz-analytics.min.js"></script>
 ```
 
+## 参数
+
+参数|是否必填|参数类型|参数说明
+:-:|:-:|:-:|-
+router|是|object|Vue Router，本插件基于路由使用
+siteIdList|是|object Array|CNZZ统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
+
 ## 使用
 
 通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
@@ -51,10 +57,14 @@ npm install vue-cnzz-analytics --save-dev
 import cnzzAnalytics from 'vue-cnzz-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-cnzz-analytics/demo/js/main-for-vue2.js)
+
 ```js
 Vue.use(cnzzAnalytics, {
   router: router,
@@ -67,6 +77,33 @@ Vue.use(cnzzAnalytics, {
 });
 ```
 
+### 在 Vue 3.0 里使用
+
+可参考demo：[main.js - Vue 3.0 demo](https://chengpeiquan.github.io/vue-cnzz-analytics/demo/js/main-for-vue3.js)
+
+```js
+/** 
+ * 初始化Vue
+ */
+createApp(app)
+  // 启动路由
+  .use(router)
+
+  // 启动插件
+  .use(cnzzAnalytics, {
+    router: router,
+    siteIdList: [
+      11111,
+      22222,
+      33333
+    ],
+    isDebug: true
+  })
+  
+  // 挂载到节点上
+  .mount('#app');
+```
+
 可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
 
 ## 方法
@@ -90,17 +127,26 @@ fromUrl|否|String|来路页面的url，必须是以 `http` 或 `https` 开头
 
 **使用示范**
 
-在template里使用（第二个参数不填表示直接输入地址访问）
+在 Vue 2.0 里使用
 
-```html
-<button @click="$pushCNZZ.pv('/test')">手动上报PV</button>
+```js
+this.$pushCNZZ.pv(
+  this.pageUrl,
+  this.fromUrl
+);
 ```
 
-在method里使用（第二个参数填写，则表示是从该页面跳转过来的）
+在 Vue 3.0 里使用
+
+（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
 
 ```js
-// this是Vue实例
-this.$pushCNZZ.pv('/home', 'https://github.com/chengpeiquan/vue-cnzz-analytics');
+const { proxy } = getCurrentInstance();
+
+proxy.$pushCNZZ.pv(
+  pageUrl.value,
+  fromUrl.value
+);
 ```
 
 ### 手动上报事件分析
@@ -121,15 +167,30 @@ nodeId|否|string|产生该事件的元素id，默认为空
 
 **使用示范**
 
-在template里使用（比如：点击了一个id为123的首页banner）
+在 Vue 2.0 里使用
 
-```html
-<button @click="$pushCNZZ.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
+```js
+this.$pushCNZZ.event(
+  this.category,
+  this.action,
+  this.label,
+  this.value,
+  this.nodeId
+);
 ```
 
-在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
+在 Vue 3.0 里使用
+
+（使用3.0的生命周期，需要遵循Vue3的规范，引入一个Vue自带的代理组件，并写在 `setup` 里执行）
 
 ```js
-// this是Vue实例
-this.$pushCNZZ.event('首页banner', '点击', 'bannerId_123', 1);
+const { proxy } = getCurrentInstance();
+
+proxy.$pushCNZZ.event(
+  category.value,
+  action.value,
+  label.value,
+  value.value,
+  nodeId.value
+);
 ```

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;
+}

demo/js/main-for-vue2.js

@@ -0,0 +1,62 @@
+/** 
+ * 初始化路由
+ * routes是来自 js/routes.js 里面的配置
+ */
+const router = new VueRouter({
+  routes,
+  linkActiveClass: 'cur',
+  linkExactActiveClass: 'cur'
+});
+
+
+/** 
+ * 引入统计插件
+ */
+Vue.use(cnzzAnalytics, {
+  router: router,
+  siteIdList: [
+    11111,
+    22222,
+    33333
+  ],
+  isDebug: true
+});
+
+
+/** 
+ * 初始化Vue
+ */
+const app = new Vue({
+  el: '#app',
+  router,
+  data () {
+    return {
+      pageUrl: '',
+      fromUrl: '',
+      category: '',
+      action: '',
+      label: '',
+      value: '',
+      nodeId: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    pv () {
+      this.$pushCNZZ.pv(
+        this.pageUrl,
+        this.fromUrl
+      );
+    },
+    event () {
+      this.$pushCNZZ.event(
+        this.category,
+        this.action,
+        this.label,
+        this.value,
+        this.nodeId
+      );
+    }
+  }
+});