mirror of
https://github.com/analyticsjs/vue-baidu-analytics.git
synced 2025-04-05 19:41:42 +08:00
Release v1.1.0
This commit is contained in:
chengpeiquan
parent
f3fbec899f
commit
5eb42e6663
18
.babelrc
Normal file
18
.babelrc
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"presets": [
|
||||||
|
[
|
||||||
|
"@babel/preset-env",
|
||||||
|
{
|
||||||
|
"modules": false,
|
||||||
|
"targets": {
|
||||||
|
"browsers": "> 1%, IE 11, not op_mini all, not dead"
|
||||||
|
},
|
||||||
|
"useBuiltIns": "usage",
|
||||||
|
"corejs": 2
|
||||||
|
}
|
||||||
|
]
|
||||||
|
],
|
||||||
|
"plugins": [
|
||||||
|
"@babel/plugin-proposal-class-properties"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,2 +0,0 @@
|
|||||||
> 1%
|
|
||||||
last 2 versions
|
|
||||||
17
.eslintrc.js
17
.eslintrc.js
@ -1,17 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
root: true,
|
|
||||||
env: {
|
|
||||||
node: true
|
|
||||||
},
|
|
||||||
'extends': [
|
|
||||||
'plugin:vue/essential',
|
|
||||||
'eslint:recommended'
|
|
||||||
],
|
|
||||||
rules: {
|
|
||||||
'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
|
|
||||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
|
|
||||||
},
|
|
||||||
parserOptions: {
|
|
||||||
parser: 'babel-eslint'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
1
.gitignore
vendored
1
.gitignore
vendored
@ -1,3 +1,4 @@
|
|||||||
|
index.dev.js
|
||||||
.DS_Store
|
.DS_Store
|
||||||
node_modules
|
node_modules
|
||||||
/dist
|
/dist
|
||||||
|
|||||||
101
README.md
101
README.md
@ -1,9 +1,9 @@
|
|||||||
vue-baidu-analytics 使用说明
|
vue-baidu-analytics 使用说明
|
||||||
===
|
===
|
||||||
|
|
||||||
基于Vue-CLI 3.0开发的百度统计插件，支持自动上报切换路由产生的流量数据，同时对官方api进行了二次封装，简化了手动上报数据的操作。
|
基于Vue开发的百度统计插件，可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面` 上使用，使用本插件的项目需要引入 `Vue Router`。
|
||||||
|
|
||||||
本插件支持部署多个站点id并对应上报数据（需求背景：比如部门A和部门B合作的项目，两个部门都要加上自己的统计代码算入自己的业绩流量池…）。
|
注意：本插件在 `1.0.0` 版本的部分参数和api现在有所弃用，请按照当前最新文档说明使用新版本，或者安装以前的 `1.0.0` 旧版本使用。
|
||||||
|
|
||||||
## 功能
|
## 功能
|
||||||
|
|
||||||
@ -11,7 +11,7 @@ vue-baidu-analytics 使用说明
|
|||||||
|
|
||||||
* 支持部署多个站点id，并对应进行数据上报
|
* 支持部署多个站点id，并对应进行数据上报
|
||||||
|
|
||||||
* 支持自动上报路由切换产生的pv数据（支持hash模式和history模式）
|
* 支持自动上报路由切换产生的pv数据（支持 `hash模式` 和 `history模式` 的地址）
|
||||||
|
|
||||||
* 支持手动提交pv上报
|
* 支持手动提交pv上报
|
||||||
|
|
||||||
@ -27,110 +27,109 @@ demo已开启debug模式，可开启控制台查看上报情况。
|
|||||||
|
|
||||||
参数|是否必填|参数类型|参数说明
|
参数|是否必填|参数类型|参数说明
|
||||||
:-:|:-:|:-:|-
|
:-:|:-:|:-:|-
|
||||||
router|是|JSON Object|Vue Router，本插件基于路由使用
|
router|是|object|Vue Router，本插件基于路由使用
|
||||||
siteIdList|是|Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
|
siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
|
||||||
debug|否|Boolean|是否开启debug模式，默认false<br>开启后会在控制台打印上报信息，上线前记得关闭
|
isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
|
||||||
|
|
||||||
## 安装
|
## 安装
|
||||||
|
|
||||||
在npm上安装
|
### 通过npm安装
|
||||||
|
|
||||||
>npm i vue-baidu-analytics
|
```
|
||||||
|
npm install vue-baidu-analytics --save-dev
|
||||||
|
```
|
||||||
|
|
||||||
然后在 main.js 里引入插件。
|
### 通过cdn安装
|
||||||
|
|
||||||
```javascript
|
```html
|
||||||
import baiduAnalytics from 'vue-baidu-analytics'
|
<script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## 使用
|
## 使用
|
||||||
|
|
||||||
安装插件后，在 main.js 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
|
通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
|
||||||
|
|
||||||
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
|
```js
|
||||||
|
import baiduAnalytics from 'vue-baidu-analytics'
|
||||||
|
```
|
||||||
|
|
||||||
```javascript
|
安装插件后，在 `main.js` 引入以下代码，即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
|
||||||
|
|
||||||
|
后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
|
||||||
|
|
||||||
|
```js
|
||||||
Vue.use(baiduAnalytics, {
|
Vue.use(baiduAnalytics, {
|
||||||
router: router,
|
router: router,
|
||||||
siteIdList: [
|
siteIdList: [
|
||||||
'your siteid',
|
'aaaaaaaaaaaaaaaaaaa',
|
||||||
'your another siteid',
|
'bbbbbbbbbbbbbbbbbbb',
|
||||||
'your one more siteid',
|
'ccccccccccccccccccc'
|
||||||
'…'
|
|
||||||
],
|
],
|
||||||
debug: false
|
isDebug: false
|
||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
|
可在开发环境打开debug模式了解相关的上报情况（上线前记得关闭debug）。
|
||||||
|
|
||||||
## api
|
## 方法
|
||||||
|
|
||||||
插件目前封装了两个常用的api，可在组件里调用。
|
插件目前封装了两个常用的api，统一挂载到Vue实例上的 `$pushBAIDU` 去调用。
|
||||||
|
|
||||||
注：如果配置了多个站点id，会同时上报给所有站点。
|
注：如果配置了多个站点id，会同时上报给所有站点。
|
||||||
|
|
||||||
### 手动上报PV
|
### 手动上报页面PV
|
||||||
|
|
||||||
api名称|功能说明
|
api名称|功能说明
|
||||||
:-:|-
|
:-:|-
|
||||||
$trackBaiduPv|手动执行PV数据上报
|
pv|手动执行PV数据上报
|
||||||
|
|
||||||
#### api参数
|
**api参数**
|
||||||
|
|
||||||
参数|是否必填|参数类型|参数说明
|
参数|是否必填|参数类型|参数说明
|
||||||
:-:|:-:|:-:|-
|
:-:|:-:|:-:|-
|
||||||
url|否|String|提交上报的url，必须是以"/"（斜杠）开头的相对路径<br>如果不填，则会默认提交为域名根目录
|
pageUrl|否|String|提交上报的url，必须是以 `/` 开头的相对路径<br>如果不填，则会默认提交为域名根目录
|
||||||
|
|
||||||
详细的参数使用要求请查看官方文档：
|
**使用示范**
|
||||||
|
|
||||||
>https://tongji.baidu.com/open/api/more?p=guide_trackPageview
|
|
||||||
|
|
||||||
注：原本url是必填，插件处理了一个默认值，所以变成选填。
|
|
||||||
|
|
||||||
#### 使用示范
|
|
||||||
|
|
||||||
在template里使用
|
在template里使用
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button @click="$trackBaiduPv('/test')">手动上报PV</button>
|
<button @click="$pushBAIDU.pv('/test')">手动上报PV</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
在method里使用
|
在method里使用
|
||||||
|
|
||||||
```javascript
|
```js
|
||||||
this.$trackBaiduPv('/test');
|
// this是Vue实例
|
||||||
|
this.$pushBAIDU.pv('/home');
|
||||||
```
|
```
|
||||||
|
|
||||||
### 手动上报事件分析
|
### 手动上报事件分析
|
||||||
|
|
||||||
api名称|功能说明
|
api名称|功能说明
|
||||||
:-:|-
|
:-:|-
|
||||||
$trackBaiduEvent|手动执行事件分析数据上报
|
event|手动执行事件分析数据上报
|
||||||
|
|
||||||
#### api参数
|
**api参数**
|
||||||
|
|
||||||
参数|是否必填|参数类型|参数说明
|
参数|是否必填|参数类型|参数说明
|
||||||
:-:|:-:|:-:|-
|
:-:|:-:|:-:|-
|
||||||
category|是|String|事件名称
|
category|是|string|产生该事件的位置名称，比如 `首页banner`
|
||||||
action|是|String|交互动作
|
action|是|string|产生该事件的行为描述，比如 `点击`
|
||||||
opt_label|否|String|事件信息，默认为空
|
label|否|string|产生该事件的标签名称，可以用来记录事件子id，比如 `bannerId_123`，默认为空
|
||||||
opt_value|否|Number|事件价值，默认1
|
value|否|number|该事件的分值，默认0
|
||||||
|
|
||||||
详细的参数使用要求请查看官方文档
|
**使用示范**
|
||||||
|
|
||||||
>https://tongji.baidu.com/open/api/more?p=guide_trackEvent
|
在template里使用（比如：点击了一个id为123的首页banner）
|
||||||
|
|
||||||
#### 使用示范
|
|
||||||
|
|
||||||
在template里使用
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
|
<button @click="$pushBAIDU.event('首页banner', '点击', 'bannerId_123')">手动上报点击事件</button>
|
||||||
```
|
```
|
||||||
|
|
||||||
在method里使用
|
在method里使用（比如：点击了一个id为123的首页banner，并设置该事件的价值为1）
|
||||||
|
|
||||||
```javascript
|
```js
|
||||||
this.$trackBaiduEvent('act_vote', 'click', 'works', 1);
|
// this是Vue实例
|
||||||
|
this.$pushBAIDU.event('首页banner', '点击', 'bannerId_123', 1);
|
||||||
```
|
```
|
||||||
@ -1,5 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
presets: [
|
|
||||||
'@vue/cli-plugin-babel/preset'
|
|
||||||
]
|
|
||||||
}
|
|
||||||
BIN
demo/favicon.ico
BIN
demo/favicon.ico
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
111
demo/index.html
111
demo/index.html
@ -1 +1,110 @@
|
|||||||
<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><link rel=icon href=favicon.ico><title>vue-baidu-analytics-demo</title><link href=static/css/home.6fd0d033.css rel=prefetch><link href=static/js/home.80371ab3.js rel=prefetch><link href=static/css/app.8a825cf3.css rel=preload as=style><link href=static/js/app.549712c5.js rel=preload as=script><link href=static/js/chunk-vendors.0d330f5a.js rel=preload as=script><link href=static/css/app.8a825cf3.css rel=stylesheet></head><body><noscript><strong>We're sorry but vue-baidu-analytics-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src=static/js/chunk-vendors.0d330f5a.js></script><script src=static/js/app.549712c5.js></script></body></html>
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>vue baidu analytics demo</title>
|
||||||
|
<script src="https://unpkg.com/vue/dist/vue.js"></script>
|
||||||
|
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
|
||||||
|
<style>
|
||||||
|
#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;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
|
||||||
|
<div id="app">
|
||||||
|
<h1>Hello App!</h1>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>切换路由自动上报测试</h2>
|
||||||
|
<div class="nav">
|
||||||
|
<router-link class="item" to="/page1" exact>Go to Page1</router-link>
|
||||||
|
<router-link class="item" to="/page2">Go to Page2</router-link>
|
||||||
|
<router-link class="item" to="/page3">Go to Page3</router-link>
|
||||||
|
</div>
|
||||||
|
<router-view></router-view>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>提交pv测试</h2>
|
||||||
|
<label class="label">
|
||||||
|
<span class="text">pageUrl</span>
|
||||||
|
<input class="input" type="text" placeholder="输入页面的url" v-model="pageUrl">
|
||||||
|
</label>
|
||||||
|
<button class="button" @click="pv">提交一个pv</button>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="section">
|
||||||
|
<h2>提交event测试</h2>
|
||||||
|
<label class="label">
|
||||||
|
<span class="text">category</span>
|
||||||
|
<input class="input" type="text" placeholder="输入产生该事件的位置名称" v-model="category">
|
||||||
|
</label>
|
||||||
|
<label class="label">
|
||||||
|
<span class="text">action</span>
|
||||||
|
<input class="input" type="text" placeholder="输入产生该事件的行为描述" v-model="action">
|
||||||
|
</label>
|
||||||
|
<label class="label">
|
||||||
|
<span class="text">label</span>
|
||||||
|
<input class="input" type="text" placeholder="输入产生该事件的标签名称" v-model="label">
|
||||||
|
</label>
|
||||||
|
<label class="label">
|
||||||
|
<span class="text">value</span>
|
||||||
|
<input class="input" type="text" placeholder="输入该事件的分值" v-model="value">
|
||||||
|
</label>
|
||||||
|
<button class="button" @click="event">提交一个event</button>
|
||||||
|
</section>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="../dist/vue-baidu-analytics.js"></script>
|
||||||
|
<script src="js/main.js"></script>
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
68
demo/js/main.js
Normal file
68
demo/js/main.js
Normal file
@ -0,0 +1,68 @@
|
|||||||
|
// 定义路由信息
|
||||||
|
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>'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
// 初始化路由
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
@ -1 +0,0 @@
|
|||||||
/*! The roject developed by chengpeiquan! */#app[data-v-74bbf350]{width:100%;max-width:900px;margin:0 auto}
|
|
||||||
@ -1 +0,0 @@
|
|||||||
/*! The roject developed by chengpeiquan! */.nav[data-v-0d96c593]{display:flex}.nav .item[data-v-0d96c593]{display:flex;justify-content:center;align-items:center;width:20%;height:100px;color:#333;background-color:#eee;text-decoration:none;cursor:pointer}.nav .item.cur[data-v-0d96c593],.nav .item[data-v-0d96c593]:hover{color:#fff;background-color:#999}.buttons[data-v-0d96c593]{display:flex}.buttons button[data-v-0d96c593]{font-size:16px;cursor:pointer;padding:20px;margin-right:20px}
|
|
||||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,2 +0,0 @@
|
|||||||
/*! The roject developed by chengpeiquan! */
|
|
||||||
(window["webpackJsonp"]=window["webpackJsonp"]||[]).push([["home"],{5034:function(t,n,e){"use strict";var a=e("8922"),r=e.n(a);r.a},6511:function(t,n,e){"use strict";e.r(n);var a=function(){var t=this,n=t.$createElement,e=t._self._c||n;return e("div",{staticClass:"main"},[e("p",[t._v("导航会自动上报数据")]),e("nav",{staticClass:"nav"},t._l(t.navList,(function(n){return e("router-link",{staticClass:"item",attrs:{to:n.url,exact:""}},[t._v(t._s(n.text))])})),1),e("p",[t._v("按钮可手动上报数据")]),e("div",{staticClass:"buttons"},[e("button",{on:{click:function(n){return t.$trackBaiduPv("/test")}}},[t._v("手动上报PV")]),e("button",{on:{click:function(n){return t.$trackBaiduEvent("act_vote","click","works",1)}}},[t._v("手动上报分析事件")])])])},r=[],u={data:function(){return{navList:[{url:"/home",text:"首页"},{url:"/home?id=123456",text:"单个query"},{url:"/home?id=123456&name=张三&age=18",text:"多个query"},{url:"/user/123456",text:"带params"},{url:"/user/123456?id=123456",text:"带params和query"}]}}},s=u,i=(e("5034"),e("2877")),c=Object(i["a"])(s,a,r,!1,null,"0d96c593",null);n["default"]=c.exports},8922:function(t,n,e){}}]);
|
|
||||||
11508
package-lock.json
generated
11508
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
54
package.json
54
package.json
@ -1,26 +1,42 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-baidu-analytics-demo",
|
"name": "vue-baidu-analytics",
|
||||||
"version": "0.1.0",
|
"version": "1.1.0",
|
||||||
"private": true,
|
"description": "A data collection tool that supports reporting of single-page application data built by Vue-cli, based on baidu statistics.",
|
||||||
|
"main": "dist/vue-baidu-analytics.min.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"serve": "vue-cli-service serve",
|
"build": "rollup -c rollup.config.ts"
|
||||||
"build": "vue-cli-service build",
|
|
||||||
"lint": "vue-cli-service lint"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"repository": {
|
||||||
"core-js": "^3.4.3",
|
"type": "git",
|
||||||
"vue": "^2.6.10",
|
"url": "git+https://github.com/chengpeiquan/vue-baidu-analytics.git"
|
||||||
"vue-router": "^3.1.3"
|
|
||||||
},
|
},
|
||||||
|
"keywords": [
|
||||||
|
"baidu",
|
||||||
|
"vue baidu",
|
||||||
|
"vue 百度统计",
|
||||||
|
"vue analytics",
|
||||||
|
"spa analytics",
|
||||||
|
"baidu统计",
|
||||||
|
"百度统计"
|
||||||
|
],
|
||||||
|
"author": "chengpeiquan",
|
||||||
|
"license": "MIT",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@vue/cli-plugin-babel": "^4.1.0",
|
"@babel/core": "^7.11.1",
|
||||||
"@vue/cli-plugin-eslint": "^4.1.0",
|
"@babel/plugin-proposal-class-properties": "^7.10.4",
|
||||||
"@vue/cli-service": "^4.1.0",
|
"@babel/preset-env": "^7.11.0",
|
||||||
"babel-eslint": "^10.0.3",
|
"@babel/preset-typescript": "^7.10.4",
|
||||||
"eslint": "^5.16.0",
|
"@rollup/plugin-babel": "^5.2.0",
|
||||||
"eslint-plugin-vue": "^5.0.0",
|
"@rollup/plugin-commonjs": "^15.0.0",
|
||||||
"stylus": "^0.54.7",
|
"@rollup/plugin-json": "^4.1.0",
|
||||||
"stylus-loader": "^3.0.2",
|
"@rollup/plugin-node-resolve": "^9.0.0",
|
||||||
"vue-template-compiler": "^2.6.10"
|
"@types/babel__core": "^7.1.9",
|
||||||
|
"rollup": "^2.26.4",
|
||||||
|
"rollup-plugin-banner": "^0.2.1",
|
||||||
|
"rollup-plugin-banner2": "^1.0.0",
|
||||||
|
"rollup-plugin-terser": "^7.0.0",
|
||||||
|
"rollup-plugin-typescript2": "^0.27.2",
|
||||||
|
"tslib": "^2.0.1",
|
||||||
|
"typescript": "^4.0.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
@ -1,17 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
|
||||||
<title>vue-baidu-analytics-demo</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but vue-baidu-analytics-demo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
|
||||||
</noscript>
|
|
||||||
<div id="app"></div>
|
|
||||||
<!-- built files will be auto injected -->
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
53
rollup.config.ts
Normal file
53
rollup.config.ts
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import resolve from '@rollup/plugin-node-resolve'
|
||||||
|
import babel from '@rollup/plugin-babel'
|
||||||
|
import commonjs from '@rollup/plugin-commonjs'
|
||||||
|
import json from '@rollup/plugin-json'
|
||||||
|
import { terser } from 'rollup-plugin-terser'
|
||||||
|
import banner2 from 'rollup-plugin-banner2'
|
||||||
|
import typescript from 'rollup-plugin-typescript2'
|
||||||
|
import pkg from './package.json'
|
||||||
|
|
||||||
|
// 版权信息配置
|
||||||
|
const ResolveBanner = () => {
|
||||||
|
return `/**
|
||||||
|
* name: ${pkg.name}
|
||||||
|
* version: v${pkg.version}
|
||||||
|
* author: ${pkg.author}
|
||||||
|
*/
|
||||||
|
`;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
input: 'src/main.ts',
|
||||||
|
output: [
|
||||||
|
{
|
||||||
|
file: `dist/vue-baidu-analytics.js`,
|
||||||
|
format: 'umd',
|
||||||
|
name: 'baiduAnalytics',
|
||||||
|
sourcemap: true
|
||||||
|
},
|
||||||
|
{
|
||||||
|
file: `dist/vue-baidu-analytics.min.js`,
|
||||||
|
format: 'umd',
|
||||||
|
name: 'baiduAnalytics',
|
||||||
|
plugins: [
|
||||||
|
terser()
|
||||||
|
],
|
||||||
|
sourcemap: true
|
||||||
|
}
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
resolve({
|
||||||
|
browser: true
|
||||||
|
}),
|
||||||
|
babel({
|
||||||
|
babelHelpers: 'bundled'
|
||||||
|
}),
|
||||||
|
commonjs(),
|
||||||
|
json(),
|
||||||
|
typescript(),
|
||||||
|
banner2( ResolveBanner, {
|
||||||
|
sourcemap: true
|
||||||
|
})
|
||||||
|
]
|
||||||
|
};
|
||||||
12
src/App.vue
12
src/App.vue
@ -1,12 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div id="app">
|
|
||||||
<router-view/>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
#app
|
|
||||||
width 100%
|
|
||||||
max-width 900px
|
|
||||||
margin 0 auto
|
|
||||||
</style>
|
|
||||||
@ -1,117 +0,0 @@
|
|||||||
'use strict';
|
|
||||||
|
|
||||||
class analytics {
|
|
||||||
#siteId;
|
|
||||||
#isDebug;
|
|
||||||
|
|
||||||
constructor (siteId, isDebug) {
|
|
||||||
this.#siteId = siteId;
|
|
||||||
this.#isDebug = isDebug;
|
|
||||||
}
|
|
||||||
|
|
||||||
_loadScript () {
|
|
||||||
window._hmt = window._hmt ? window._hmt : [];
|
|
||||||
const SCRIPT = document.createElement('script');
|
|
||||||
SCRIPT['async'] = true;
|
|
||||||
SCRIPT['src'] = `https://hm.baidu.com/hm.js?${this.#siteId}`;
|
|
||||||
document.querySelector('head').appendChild(SCRIPT);
|
|
||||||
|
|
||||||
if ( this.#isDebug ) {
|
|
||||||
console.log(`[vue-baidu-analytics] siteId load done.\nsiteId: ${this.#siteId}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_setAccount () {
|
|
||||||
window._hmt.push(['_setAccount', this.#siteId]);
|
|
||||||
}
|
|
||||||
|
|
||||||
_trackPageview (url) {
|
|
||||||
if ( typeof url !== 'string' || !url ) {
|
|
||||||
url = '/';
|
|
||||||
}
|
|
||||||
|
|
||||||
this._setAccount();
|
|
||||||
window._hmt.push(['_trackPageview', url]);
|
|
||||||
|
|
||||||
if ( this.#isDebug ) {
|
|
||||||
console.log(`[vue-baidu-analytics] track pv done.\nsiteId: ${this.#siteId}\nurl: ${url}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
_trackEvent (category, action, opt_label, opt_value) {
|
|
||||||
if ( typeof category !== 'string' || typeof action !== 'string' || !category || !action ) {
|
|
||||||
throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( typeof opt_label !== 'string' || !opt_label ) {
|
|
||||||
opt_label = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( typeof opt_value !== 'number' || !opt_value ) {
|
|
||||||
opt_value = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
this._setAccount();
|
|
||||||
window._hmt.push(['_trackEvent', category, action, opt_label, opt_value]);
|
|
||||||
|
|
||||||
if ( this.#isDebug ) {
|
|
||||||
console.log(`[vue-baidu-analytics] track event done.\nsiteId: ${this.#siteId}\ncategory: ${category}\naction: ${action}\nopt_label: ${opt_label}\nopt_value: ${opt_value}`);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function install (Vue, options = {}) {
|
|
||||||
|
|
||||||
if ( typeof document === 'undefined' || typeof window === 'undefined' ) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
|
|
||||||
const { router, siteIdList, debug } = options;
|
|
||||||
|
|
||||||
if ( !router ) {
|
|
||||||
throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( !siteIdList ) {
|
|
||||||
throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
|
|
||||||
}
|
|
||||||
|
|
||||||
let isDebug = false;
|
|
||||||
if ( debug === true ) {
|
|
||||||
isDebug = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
if ( siteIdList ) {
|
|
||||||
siteIdList.forEach( siteId => {
|
|
||||||
const SITE = new analytics(siteId, isDebug);
|
|
||||||
SITE._loadScript();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
router.afterEach( to => {
|
|
||||||
|
|
||||||
const REPORT_PATH_DIR_COUNT = window.location.pathname.split('/').length;
|
|
||||||
const REPORT_PATH = window.location.pathname.split('/').slice(0, REPORT_PATH_DIR_COUNT - 1).join('/');
|
|
||||||
const REPORT_URL = router.mode === 'hash' ? `${REPORT_PATH}/#${to.fullPath}` : `${REPORT_PATH}${to.fullPath}`;
|
|
||||||
|
|
||||||
siteIdList.forEach( siteId => {
|
|
||||||
const SITE = new analytics(siteId, isDebug);
|
|
||||||
SITE._trackPageview(REPORT_URL);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.prototype.$trackBaiduPv = (url) => {
|
|
||||||
siteIdList.forEach( siteId => {
|
|
||||||
const SITE = new analytics(siteId, isDebug);
|
|
||||||
SITE._trackPageview(url);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
Vue.prototype.$trackBaiduEvent = (category, action, opt_label, opt_value) => {
|
|
||||||
siteIdList.forEach( siteId => {
|
|
||||||
const SITE = new analytics(siteId, isDebug);
|
|
||||||
SITE._trackEvent(category, action, opt_label, opt_value);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
22
src/global.d.ts
vendored
Normal file
22
src/global.d.ts
vendored
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
import PushBAIDU from '@m/pushBAIDU'
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
interface Window {
|
||||||
|
_hmt: any
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Options {
|
||||||
|
router: any
|
||||||
|
siteIdList: string[]
|
||||||
|
isDebug: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Vue {
|
||||||
|
prototype: any
|
||||||
|
$pushBAIDU: PushBAIDU
|
||||||
|
}
|
||||||
|
|
||||||
|
interface To {
|
||||||
|
fullPath: string
|
||||||
|
}
|
||||||
|
}
|
||||||
22
src/main.js
22
src/main.js
@ -1,22 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import App from './App.vue'
|
|
||||||
import router from './router'
|
|
||||||
|
|
||||||
import baiduAnalytics from '@lib/vue-baidu-analytics'
|
|
||||||
|
|
||||||
Vue.use(baiduAnalytics, {
|
|
||||||
router: router,
|
|
||||||
siteIdList: [
|
|
||||||
'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa',
|
|
||||||
'bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb',
|
|
||||||
'cccccccccccccccccccccccccccccccc'
|
|
||||||
],
|
|
||||||
debug: true
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
|
||||||
|
|
||||||
new Vue({
|
|
||||||
router,
|
|
||||||
render: h => h(App)
|
|
||||||
}).$mount('#app')
|
|
||||||
43
src/main.ts
Normal file
43
src/main.ts
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import PushBAIDU from '@m/pushBAIDU'
|
||||||
|
|
||||||
|
export default function install (Vue: Vue, { router, siteIdList, isDebug = false }: Partial<Options>) {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 一些环境和参数的检查
|
||||||
|
*/
|
||||||
|
if ( typeof document === 'undefined' || typeof window === 'undefined' ) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !router ) {
|
||||||
|
throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !siteIdList ) {
|
||||||
|
throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 挂载推送的方法
|
||||||
|
*/
|
||||||
|
const pushBAIDU = new PushBAIDU(siteIdList, isDebug);
|
||||||
|
Vue.prototype.$pushBAIDU = pushBAIDU;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 部署站点并初始化
|
||||||
|
*/
|
||||||
|
if ( siteIdList ) {
|
||||||
|
pushBAIDU.init();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 路由切换时执行PV上报
|
||||||
|
*/
|
||||||
|
router.afterEach( (to: To) => {
|
||||||
|
const PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
|
||||||
|
const PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
|
||||||
|
const PAGE_URL = router.mode === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
|
||||||
|
|
||||||
|
pushBAIDU.pv(PAGE_URL);
|
||||||
|
});
|
||||||
|
}
|
||||||
90
src/modules/baidu.ts
Normal file
90
src/modules/baidu.ts
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
/**
|
||||||
|
* 定义基础配置
|
||||||
|
* 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
|
||||||
|
*/
|
||||||
|
class BAIDU {
|
||||||
|
siteId: string;
|
||||||
|
isDebug: boolean;
|
||||||
|
|
||||||
|
constructor (siteId: string = '', isDebug: boolean = false) {
|
||||||
|
this.siteId = siteId;
|
||||||
|
this.isDebug = isDebug;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 初始化
|
||||||
|
*/
|
||||||
|
init () {
|
||||||
|
window._hmt = window._hmt ? window._hmt : [];
|
||||||
|
const SCRIPT = document.createElement('script');
|
||||||
|
SCRIPT['async'] = true;
|
||||||
|
SCRIPT['src'] = `https://hm.baidu.com/hm.js?${this.siteId}`;
|
||||||
|
document.querySelector('head').appendChild(SCRIPT);
|
||||||
|
|
||||||
|
if ( this.isDebug ) {
|
||||||
|
console.log(`[vue-baidu-analytics] siteId load done.\nsiteId: ${this.siteId}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置要响应的站点
|
||||||
|
*/
|
||||||
|
setAccount () {
|
||||||
|
window._hmt.push(['_setAccount', this.siteId]);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交PV、UV
|
||||||
|
*/
|
||||||
|
trackPageview (pageUrl: string) {
|
||||||
|
// 如果页面链接没传或者无效链接，则默认为根域名
|
||||||
|
if ( !pageUrl || typeof pageUrl !== 'string' ) {
|
||||||
|
pageUrl = '/';
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果页面链接带上了域名，则需要过滤掉
|
||||||
|
if ( pageUrl.includes('http') ) {
|
||||||
|
const PAGE_CUT = pageUrl.split('/');
|
||||||
|
const HOST_NAME = `${PAGE_CUT[0]}//${PAGE_CUT[2]}`;
|
||||||
|
pageUrl = pageUrl.replace(HOST_NAME, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置响应id并提交数据
|
||||||
|
this.setAccount();
|
||||||
|
window._hmt.push(['_trackPageview', pageUrl]);
|
||||||
|
|
||||||
|
if ( this.isDebug ) {
|
||||||
|
console.log(`[vue-baidu-analytics] track pv done.\nsiteId: ${this.siteId}\npageUrl: ${pageUrl}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 提交点击事件
|
||||||
|
*/
|
||||||
|
trackEvent (category: string, action: string, label: string, value: number) {
|
||||||
|
// 前两个是必填项
|
||||||
|
if ( typeof category !== 'string' || typeof action !== 'string' || !category || !action ) {
|
||||||
|
throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 重置一些无效的默认值
|
||||||
|
if ( !label || typeof label !== 'string' ) {
|
||||||
|
label = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
if ( !Number(value) ) {
|
||||||
|
value = 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 设置响应id并提交数据
|
||||||
|
this.setAccount();
|
||||||
|
window._hmt.push(['_trackEvent', category, action, label, value]);
|
||||||
|
|
||||||
|
if ( this.isDebug ) {
|
||||||
|
console.log(`[vue-baidu-analytics] track event done.\nsiteId: ${this.siteId}\ncategory: ${category}\naction: ${action}\nlabel: ${label}\nvalue: ${value}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default BAIDU;
|
||||||
47
src/modules/pushBAIDU.ts
Normal file
47
src/modules/pushBAIDU.ts
Normal file
@ -0,0 +1,47 @@
|
|||||||
|
import BAIDU from '@m/baidu'
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 定义推送操作
|
||||||
|
*/
|
||||||
|
class PushBAIDU {
|
||||||
|
siteIdList: string[];
|
||||||
|
isDebug: boolean;
|
||||||
|
|
||||||
|
constructor (siteIdList: string[], isDebug: boolean) {
|
||||||
|
this.siteIdList = siteIdList;
|
||||||
|
this.isDebug = isDebug;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量部署站点
|
||||||
|
*/
|
||||||
|
init () {
|
||||||
|
this.siteIdList.forEach( (siteId: string) => {
|
||||||
|
const SITE = new BAIDU(siteId, this.isDebug);
|
||||||
|
SITE.init();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量提交pv上报
|
||||||
|
*/
|
||||||
|
pv (pageUrl: string) {
|
||||||
|
this.siteIdList.forEach( (siteId: string) => {
|
||||||
|
const SITE = new BAIDU(siteId, this.isDebug);
|
||||||
|
SITE.trackPageview(pageUrl);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量提交事件上报
|
||||||
|
*/
|
||||||
|
event (category: string, action: string, label: string, value: number) {
|
||||||
|
this.siteIdList.forEach( (siteId: string) => {
|
||||||
|
const SITE = new BAIDU(siteId, this.isDebug);
|
||||||
|
SITE.trackEvent(category, action, label, value);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
export default PushBAIDU;
|
||||||
@ -1,38 +0,0 @@
|
|||||||
import Vue from 'vue'
|
|
||||||
import VueRouter from 'vue-router'
|
|
||||||
|
|
||||||
Vue.use(VueRouter)
|
|
||||||
|
|
||||||
const routes = [
|
|
||||||
{
|
|
||||||
path: '/',
|
|
||||||
redirect: 'home'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/home',
|
|
||||||
name: 'home',
|
|
||||||
component: () => import(/* webpackChunkName: "home" */ '../views/home.vue'),
|
|
||||||
children: [
|
|
||||||
{
|
|
||||||
path: 'room',
|
|
||||||
name: 'room',
|
|
||||||
component: () => import(/* webpackChunkName: "subRoom" */ '../views/home.vue')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/user/:id',
|
|
||||||
name: 'user',
|
|
||||||
component: () => import(/* webpackChunkName: "user" */ '../views/home.vue')
|
|
||||||
}
|
|
||||||
]
|
|
||||||
|
|
||||||
const router = new VueRouter({
|
|
||||||
// base: process.env.NODE_ENV === 'production' ? location.pathname.split('/').slice(0, 2).join('/') : '/',
|
|
||||||
// mode: 'history',
|
|
||||||
linkActiveClass: 'cur',
|
|
||||||
linkExactActiveClass: 'cur',
|
|
||||||
routes
|
|
||||||
})
|
|
||||||
|
|
||||||
export default router
|
|
||||||
@ -1,69 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="main">
|
|
||||||
<p>导航会自动上报数据</p>
|
|
||||||
<nav class="nav">
|
|
||||||
<router-link class="item" :to="item.url" v-for="item in navList" exact>{{ item.text }}</router-link>
|
|
||||||
</nav>
|
|
||||||
<p>按钮可手动上报数据</p>
|
|
||||||
<div class="buttons">
|
|
||||||
<button @click="$trackBaiduPv('/test')">手动上报PV</button>
|
|
||||||
<button @click="$trackBaiduEvent('act_vote', 'click', 'works', 1)">手动上报分析事件</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
navList: [
|
|
||||||
{
|
|
||||||
url: '/home',
|
|
||||||
text: '首页'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
url: '/home?id=123456',
|
|
||||||
text: '单个query'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
url: '/home?id=123456&name=张三&age=18',
|
|
||||||
text: '多个query'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
url: '/user/123456',
|
|
||||||
text: '带params'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
url: '/user/123456?id=123456',
|
|
||||||
text: '带params和query'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
.nav
|
|
||||||
display flex
|
|
||||||
.item
|
|
||||||
display flex
|
|
||||||
justify-content center
|
|
||||||
align-items center
|
|
||||||
width 20%
|
|
||||||
height 100px
|
|
||||||
color #333
|
|
||||||
background-color #eee
|
|
||||||
text-decoration none
|
|
||||||
cursor pointer
|
|
||||||
&:hover, &.cur
|
|
||||||
color #fff
|
|
||||||
background-color #999
|
|
||||||
.buttons
|
|
||||||
display flex
|
|
||||||
button
|
|
||||||
font-size 16px
|
|
||||||
cursor pointer
|
|
||||||
padding 20px
|
|
||||||
margin-right 20px
|
|
||||||
</style>
|
|
||||||
28
tsconfig.json
Normal file
28
tsconfig.json
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES5",
|
||||||
|
"module": "ES2015",
|
||||||
|
"allowSyntheticDefaultImports": true,
|
||||||
|
"noImplicitAny": true,
|
||||||
|
"removeComments": true,
|
||||||
|
"preserveConstEnums": true,
|
||||||
|
"sourceMap": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
],
|
||||||
|
"@m/*": [
|
||||||
|
"src/modules/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"declaration": true,
|
||||||
|
"declarationDir": "./dist"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*.ts"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -1,65 +0,0 @@
|
|||||||
const webpack = require('webpack');
|
|
||||||
const path = require('path');
|
|
||||||
function resolve(dir){
|
|
||||||
return path.join(__dirname, dir)
|
|
||||||
}
|
|
||||||
|
|
||||||
module.exports = {
|
|
||||||
publicPath: './',
|
|
||||||
assetsDir: 'static',
|
|
||||||
productionSourceMap: false,
|
|
||||||
lintOnSave: false,
|
|
||||||
css: {
|
|
||||||
loaderOptions: {
|
|
||||||
css: {
|
|
||||||
// options here will be passed to css-loader
|
|
||||||
},
|
|
||||||
postcss: {
|
|
||||||
// options here will be passed to postcss-loader
|
|
||||||
plugins: [
|
|
||||||
// require('postcss-px2rem')({
|
|
||||||
// remUnit: 75
|
|
||||||
// })
|
|
||||||
// require('postcss-px-to-viewport')({
|
|
||||||
// viewportWidth: 750,
|
|
||||||
// minPixelValue: 1
|
|
||||||
// })
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
chainWebpack: (config)=>{
|
|
||||||
config.resolve.alias
|
|
||||||
.set('@', resolve('src'))
|
|
||||||
.set('@img',resolve('src/assets/img'))
|
|
||||||
.set('@styl',resolve('src/assets/styl'))
|
|
||||||
.set('@js',resolve('src/assets/js'))
|
|
||||||
.set('@lib',resolve('src/assets/js/lib'))
|
|
||||||
.set('@cp',resolve('src/components'))
|
|
||||||
.set('@views',resolve('src/views'))
|
|
||||||
.end()
|
|
||||||
config.module
|
|
||||||
.rule('images')
|
|
||||||
.test(/\.(png|jpe?g|gif|webp|svg)(\?.*)?$/)
|
|
||||||
.use('url-loader')
|
|
||||||
.loader('url-loader')
|
|
||||||
.options({
|
|
||||||
limit: 10000,
|
|
||||||
fallback: {
|
|
||||||
loader: 'file-loader',
|
|
||||||
options: {
|
|
||||||
name: 'static/img/[name].[hash:8].[ext]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
.end()
|
|
||||||
},
|
|
||||||
configureWebpack: config => {
|
|
||||||
if (process.env.NODE_ENV !== 'production') return;
|
|
||||||
return {
|
|
||||||
plugins: [
|
|
||||||
new webpack.BannerPlugin(' The roject developed by chengpeiquan! ')
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Loading…
x
Reference in New Issue
Block a user