diff --git a/demo/css/style.css b/demo/css/style.css new file mode 100644 index 0000000..f1cc04e --- /dev/null +++ b/demo/css/style.css @@ -0,0 +1,48 @@ +#app, +.section { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; +} +.section { + margin-bottom: 40px; +} +.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; + 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/index.html b/demo/index.html index 131b4af..0c04308 100644 --- a/demo/index.html +++ b/demo/index.html @@ -6,56 +6,7 @@ vue baidu analytics demo - + diff --git a/demo/js/main-for-vue3.js b/demo/js/main-for-vue3.js new file mode 100644 index 0000000..643f328 --- /dev/null +++ b/demo/js/main-for-vue3.js @@ -0,0 +1,74 @@ +const { createRouter, createWebHashHistory } = VueRouter; +const { createApp } = Vue; + +// 定义路由信息 +const routes = [ + { + path: '/', + redirect: '/page1' + }, + { + path: '/page1', + component: { + template: '
当前是 Page1 的路由
' + } + }, + { + path: '/page2', + component: { + template: '
当前是 Page2 的路由
' + } + }, + { + path: '/page3', + component: { + template: '
当前是 Page3 的路由
' + } + } +]; + +// 初始化路由 +const router = createRouter({ + history: createWebHashHistory(), + routes, + linkActiveClass: 'cur', + linkExactActiveClass: 'cur' +}); + +// 初始化Vue +createApp({}) + .use(router) + .use(baiduAnalytics, { + router: router, + siteIdList: [ + '8dca8e2532df48ea7f1b15c714588691' + ], + isDebug: true + }) + .mount('#app'); + +// // 初始化Vue +// const app = new Vue({ +// el: '#app', +// router, +// data () { +// return { +// pageUrl: '', +// category: '', +// action: '', +// label: '', +// value: '' +// } +// }, +// mounted () { +// }, +// methods: { +// pv () { +// // this.$pushBAIDU.pv(this.pageUrl); +// console.log(baiduAnalytics.pushBAIDU); +// }, +// event () { +// this.$pushBAIDU.event(this.category, this.action, this.label, this.value); +// } +// } +// }); \ No newline at end of file diff --git a/demo/js/main.js b/demo/js/main.js index 2fb5e3d..d9da3e7 100644 --- a/demo/js/main.js +++ b/demo/js/main.js @@ -35,15 +35,11 @@ const router = new VueRouter({ Vue.use(baiduAnalytics, { router: router, siteIdList: [ - 'aaaaaaaaaaaaaaaaaaa', - 'bbbbbbbbbbbbbbbbbbb', - 'ccccccccccccccccccc' + '8dca8e2532df48ea7f1b15c714588691' ], isDebug: true }); -console.log('baiduAnalytics', baiduAnalytics); - // 初始化Vue const app = new Vue({ el: '#app', diff --git a/demo/vue3.html b/demo/vue3.html new file mode 100644 index 0000000..5007a91 --- /dev/null +++ b/demo/vue3.html @@ -0,0 +1,61 @@ + + + + + + [Vue3] vue baidu analytics demo + + + + + + +
+

Hello Vue3 App!

+ +
+

切换路由自动上报测试

+
+ Go to Page1 + Go to Page2 + Go to Page3 +
+ +
+ +
+

提交pv测试

+ + +
+ +
+

提交event测试

+ + + + + +
+
+ + + + + + \ No newline at end of file