update demo.

Author: chengpeiquan

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,56 @@
+/** 
+ * 初始化路由
+ * 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: '',
+      category: '',
+      action: '',
+      label: '',
+      value: ''
+    }
+  },
+  mounted () {
+  },
+  methods: {
+    pv () {
+      this.$pushCNZZ.pv(this.pageUrl);
+    },
+    event () {
+      this.$pushCNZZ.event(
+        this.category,
+        this.action,
+        this.label,
+        this.value
+      );
+    }
+  }
+});

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.$pushCNZZ.pv(pageUrl.value);
+    }
+
+    // 提交事件的操作
+    const event = () => {
+      proxy.$pushCNZZ.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(cnzzAnalytics, {
+    router: router,
+    siteIdList: [
+      11111,
+      22222,
+      33333
+    ],
+    isDebug: true
+  })
+  
+  // 挂载到节点上
+  .mount('#app');

demo/js/main.js

@@ -0,0 +1,27 @@
+/** 
+ * 定义路由信息
+ */
+const routes = [
+  {
+    path: '/',
+    redirect: '/page1'
+  },
+  {
+    path: '/page1',
+    component: {
+      template: '<div class="view">当前是 <strong>Page1</strong> 的路由</div>'
+    }
+  },
+  {
+    path: '/page2',
+    component: {
+      template: '<div class="view">当前是 <strong>Page2</strong> 的路由</div>'
+    }
+  },
+  {
+    path: '/page3',
+    component: {
+      template: '<div class="view">当前是 <strong>Page3</strong> 的路由</div>'
+    }
+  }
+];