blackteay/vue-baidu-analytics
1
0
Fork 0
mirror of https://github.com/analyticsjs/vue-baidu-analytics.git synced 2025-04-06 03:58:00 +08:00
Code Issues Projects Releases Wiki Activity

backup.

Browse Source
This commit is contained in:
chengpeiquan 2021-01-07 17:57:05 +08:00
parent 91d323a89d
commit 350fb3dfd5
3 changed files with 79 additions and 75 deletions

122
demo/js/main-for-vue3.js

@ -1,33 +1,14 @@
/**
* 导入需要用到的组件
*/
const { createRouter, createWebHashHistory } = VueRouter;
const { createApp, defineComponent, getCurrentInstance, ref } = Vue;
// 定义路由信息
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>'
}
}
];
// 初始化路由
/**
* 初始化路由
* routes是来自 js/routes.js 里面的配置
*/
const router = createRouter({
history: createWebHashHistory(),
routes,
@ -35,39 +16,38 @@ const router = createRouter({
linkExactActiveClass: 'cur'
});
// 初始化Vue
createApp({})
.use(router)
.use(baiduAnalytics, {
router: router,
siteIdList: [
'8dca8e2532df48ea7f1b15c714588691'
],
isDebug: true
})
.mount('#app');
const app = defineComponent({
/**
* 创建实例
*/
const app = {
setup () {
// 数据
// 插件要用到的一个代理组件
const { proxy } = getCurrentInstance();
// 初始化要用到的数据
const pageUrl = ref('');
const category = ref('');
const action = ref('');
const label = ref('');
const value = ref('');
const { proxy } = getCurrentInstance();
console.log('setup');
console.log(pageUrl);
// 提交pv的操作
const pv = () => {
pushBAIDU.pv('/')
proxy.$pushBAIDU.pv(pageUrl.value);
}
const pv2 = () => {
proxy.$pushBAIDU.pv('/2');
// 提交事件的操作
const event = () => {
proxy.$pushBAIDU.event(
category.value,
action.value,
label.value,
value.value
);
}
// Vue 3.0 需要把模板要用到的东西 return 出去
return {
// 数据
pageUrl,
@ -78,33 +58,29 @@ const app = defineComponent({
// 方法
pv,
pv2
event
}
}
})
};
// // 初始化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);
// }
// }
// });
/**
* 初始化Vue
*/
createApp(app)
// 启动路由
.use(router)
// 启动插件
.use(baiduAnalytics, {
router: router,
siteIdList: [
'aaaaaaaaaaaaaaaaaaa',
'bbbbbbbbbbbbbbbbbbb',
'ccccccccccccccccccc'
],
isDebug: true
})
// 挂载到节点上
.mount('#app');

27
demo/js/routes.js Normal file

@ -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>'
}
}
];

5
demo/vue3.html

@ -4,8 +4,8 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>[Vue3] vue baidu analytics demo</title>
<script src="https://unpkg.com/vue@3.0.5/dist/vue.global.js"></script>
<script src="https://unpkg.com/vue-router@4.0.2/dist/vue-router.global.js"></script>
<script src="https://unpkg.com/vue@3"></script>
<script src="https://unpkg.com/vue-router@4"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
@ -55,6 +55,7 @@
</div>
<script src="../dist/vue-baidu-analytics.js"></script>
<script src="js/routes.js"></script>
<script src="js/main-for-vue3.js"></script>
</body>