提交 bf5c4b0b 作者: 潘亚楠

增加vux router services axios 埋点

上级 8f8c1c7b
......@@ -2,6 +2,7 @@
+ 关闭生产环境devtool: '#source-map'
+ 开启生产环境productionGzip: true
## script 说明
```
"scripts": {
// 本地开发连接后端服务
......
......@@ -6,7 +6,7 @@
<title>QJ Great Project</title>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
<!-- 组件库开始 -->
<!-- 未设置埋点组件库开始 -->
<!-- lan -->
<!--
<script src="http://192.168.10.200:7400/libs@1.0.1/index.js"></script>
......@@ -18,9 +18,18 @@
<link rel="stylesheet" href="https://dweb.allhome.com.cn/libs@1.0.1/theme-chalk/index.css">
-->
<!-- production -->
<script src="https://web.allhome.com.cn/libs@1.0.1/index.js"></script>
<link rel="stylesheet" href="https://web.allhome.com.cn/libs@1.0.1/theme-chalk/index.css">
<!-- 组件库结束 -->
<!-- <script src="https://web.allhome.com.cn/libs@1.0.1/index.js"></script>
<link rel="stylesheet" href="https://web.allhome.com.cn/libs@1.0.1/theme-chalk/index.css"> -->
<!-- 未设置埋点组件库组件库结束 -->
<!-- 设置埋点组件库开始 -->
<!-- release -->
<!-- <script src="https://dwebv2.allhome.com.cn/libs@1.0.1/index.js"></script>
<link rel="stylesheet" href="https://dwebv2.allhome.com.cn/libs@1.0.1/theme-chalk/index.css"> -->
<!-- production -->
<script src="https://webv2.allhome.com.cn/libs@1.0.1/index.js"></script>
<link rel="stylesheet" href="https://webv2.allhome.com.cn/libs@1.0.1/theme-chalk/index.css">
<!-- 设置埋点组件库结束 -->
<!-- 用户操作埋点开始 -->
<!-- lan -->
......
......@@ -25,7 +25,8 @@
"lint": "eslint --ext .js,.vue src test/unit test/e2e/specs"
},
"dependencies": {
"vue-router": "^3.0.1"
"vue-router": "^3.0.1",
"vuex": "^3.1.2"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
......@@ -75,6 +76,7 @@
"mocha": "^3.2.0",
"nightwatch": "^0.9.12",
"node-notifier": "^5.1.2",
"node-sass": "^4.13.0",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"phantomjs-prebuilt": "^2.1.14",
......@@ -83,6 +85,7 @@
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"sass-loader": "^7.1.0",
"selenium-server": "^3.0.1",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
......
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
......@@ -11,13 +10,16 @@ export default {
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
<style lang="scss">
*{
font-family: '微软雅黑';
}
</style>
body {
margin: 0;
padding: 0;
background-color: #f7f7f7 !important;
#app{
display: flex;
}
}
</style>
\ No newline at end of file
import request from '@/assets/js/axios.js';
const apiList = [
// 正常响应
// {
// url: '/dev/rightServer',
// method: 'post',
// defaultData: {
// a: 1
// },
// name: "rightServerPost"
// },
// 异常响应
{
url: '/user',
method: 'get',
name: 'getUserById'
},
// 查询用户交互日志
// {
// url: '/dev/logLine',
// method: 'get',
// name: 'getLogline',
// }
]
const namespace = 'userApi';
request.add(namespace, apiList);
export default request.create(namespace);
\ No newline at end of file
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
import { Request } from 'buriedPoint';
const baseURL = {
'development': ' http://mock.allhome.com.cn/mock/5df2ec78d72c6e32062ac4b6/cli',
'lan': ' http://mock.allhome.com.cn/mock/5df2ec78d72c6e32062ac4b6/cli',
'dtest': ' http://mock.allhome.com.cn/mock/5df2ec78d72c6e32062ac4b6/cli',
'pred': ' http://mock.allhome.com.cn/mock/5df2ec78d72c6e32062ac4b6/cli',
'production': ' http://mock.allhome.com.cn/mock/5df2ec78d72c6e32062ac4b6/cli',
}[process.env.NODE_ENV]
const request = new Request({
baseURL,
timeout: 60000,
}, process.env.NODE_ENV, 'youProjectName');
request.interceptors({
// 请求拦截
request: config => {
config.headers.token = window.token;
return config
},
// 响应拦截
response: res => {
let { message, result, statusCode } = res.data
// 退出登录状态码
let logoutCodes = new Set([435001, 435011, 436050])
if (statusCode === 1000) {
// 更新全局token
let { pragma } = res.headers
if (pragma) window.token = pragma
// 返回数据
return result
} else if (logoutCodes.has(statusCode)) {
setTimeout(() => window.logout(), 1000)
return Promise.reject({ message })
} else {
return Promise.reject({ message, statusCode })
}
},
error: error => Promise.reject(error.response.data),
})
// 标准库request
export default request;
// 普通axios实例
export const axios = request.axios;
\ No newline at end of file
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li>
<a
href="https://vuejs.org"
target="_blank"
>
Core Docs
</a>
</li>
<li>
<a
href="https://forum.vuejs.org"
target="_blank"
>
Forum
</a>
</li>
<li>
<a
href="https://chat.vuejs.org"
target="_blank"
>
Community Chat
</a>
</li>
<li>
<a
href="https://twitter.com/vuejs"
target="_blank"
>
Twitter
</a>
</li>
<br>
<li>
<a
href="http://vuejs-templates.github.io/webpack/"
target="_blank"
>
Docs for This Template
</a>
</li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li>
<a
href="http://router.vuejs.org/"
target="_blank"
>
vue-router
</a>
</li>
<li>
<a
href="http://vuex.vuejs.org/"
target="_blank"
>
vuex
</a>
</li>
<li>
<a
href="http://vue-loader.vuejs.org/"
target="_blank"
>
vue-loader
</a>
</li>
<li>
<a
href="https://github.com/vuejs/awesome-vue"
target="_blank"
>
awesome-vue
</a>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
<template>
<div class="qj-demo">
<img src="../../assets/logo.png">
<h1>{{ message }}</h1>
<ul>
<li>基础组件是跟业务不相干的组件,是业务组件的基础组成部分</li>
<li>基础组件就比如说:对element-ui的分页组件进行的二次封装</li>
<li>基础组件是不许跟数据层直接产生数据交互的(this.$store.dispatch不能出现)</li>
</ul>
<el-button type="primary">好的</el-button>
</div>
</template>
<script>
export default {
name: 'qj-demo',
props: {
message: {
type: String,
default: '这是个基础组件'
}
}
};
</script>
<template>
<div class="qj-business">
<h1>{{ msg1 }}</h1>
<ul>
<li>业务组件是跟业务强相关的组件</li>
<li>表单里面包含了业务项,就是业务组件</li>
<li>业务组件可以直接跟数据层产生数据交互,可以将数据回传给父组件</li>
</ul>
<el-button type="primary" @click="getUserById">知道了</el-button>
<div>
{{ person.name }}----{{ person.age }}<br>
{{ user.name }}-----{{ user.age }}
</div>
</div>
</template>
<script>
import UserService from '@/services/User';
import { mapState, mapActions } from 'vuex';
export default {
name: 'qj-business',
props: {
msg1: {
type: String,
defalut: '这里是业务组件'
}
},
data() {
return {
person: {},
}
},
computed: {
...mapState("user", ["user"])
},
methods: {
...mapActions("user", ["getUser"]),
async getUserById() {
// service
const { name, age } = await UserService.getUserById(1);
this.person= { name, age };
// vuex
this.getUser({ name, age });
}
}
};
</script>
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
// 引入组件库
import ElementUI from 'element-ui';
import router from './router'
import store from "./store.js"
// 引入扫描文件
import scanFile from './scanfile.js'
// 引入icon
import '../src/assets/icon/iconfont.css'
// 引入埋点
import buriedPoint from 'buriedPoint';
// 引入样式
import './style/index.scss';
import App from './App'
import './assets/icon/iconfont'
Vue.use(buriedPoint);
Vue.use(ElementUI);
// Vue.config.productionTip = false
console.log(process.env.NODE_ENV)
Vue.config.productionTip = false;
// token 放这里避免埋点包初始化无法获取token
window.token || (window.token = 'I16S21xSj+i0vHo0fD/1I+35R4WWbFs6sCtqS9ZhkTWDyu3zSWL91Qsv9y6WOy/LN4rLzTGHu6EsN5ygle3v4FWh1wxJEO63gVhql6b+52XO5FC8JB94oI7RiafOg44nwVSM6c+5teiCNqbtYPhOl1Cg5ruesyl1KebWXINJHuAJI4h4RbMNZ23vBihcf0f6DwDYMJCpI9pLyzYMWiENFV7QuNO5uv5c2RyuumzAUdn0qQnCmlp0lIhjeg/yXmGKlc0VElOsw+xsqEty7quhpqFVKgqrJll2fExY/6WQqgLBdbLNeyNgbgjnIrrq80OGtm97qEswMxaiWWbKfWDY/w==');
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
el: '#app',
router,
components: { App },
store,
template: '<App/>'
})
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
......@@ -8,8 +7,8 @@ export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
name: 'index',
component: () => import('@/views/Index.vue')
}
]
})
const components = []
const srcContext = require.context('@/components', true, /\.vue$/)
srcContext.keys().forEach(item => {
let src = srcContext(item)
if (!src.default.name) {
src.default.name = item.split('/').pop().replace(/\.vue$/, '')
}
components.push(src)
})
const install = function (Vue) {
components.map(component => {
let name = component.default.name
Vue.component(name, component.default)
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
module.exports = {
install
}
import userApi from '../api/user';
class User {
constructor({ name = '', birthday = ''}) {
this.name = name;
this.birthday = birthday;
this.age = new Date().getFullYear() - new Date(this.birthday).getFullYear();
}
static async getUserById(id) {
const res = await userApi.getUserById({ param: [id]});
return new User(res);
}
}
export default User;
\ No newline at end of file
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let model = { modules: {} }
let name = []
// 扫描文件
const srcContext = require.context('@/store', true, /\.js$/)
srcContext.keys().forEach(item => {
if (item !== './index.js' && srcContext(item).default !== undefined) {
// 重新定义赋值model
name = item.split('/').pop().replace(/\.js$/, '')
model.modules[name] = srcContext(item).default
}
})
// 注册导出
export default new Vuex.Store(model)
import { USER } from '../mutations';
const state = {
user: {}
};
const mutations = {
USER(state, user) {
state.user = user;
}
};
const actions = {
getUser({ commit }, user) {
setTimeout(_ => {
commit(USER, user);
}, 0);
}
}
export default {
namespaced: true,
state,
mutations,
actions
}
export const USER = "USER"
\ No newline at end of file
@import './var.scss';
#index {
width: 1200px;
margin: 30px auto;
.drak-background{
position: fixed;
top:-100px;
left:0;
bottom: 0;
right: 0;
z-index: 2000;
background: rgba(0, 0, 0, 0.4);
}
.el-pagination {
text-align: right;
margin-top: 40px;
}
.box-warp {
width:616px;
height:55px;
}
/* 侧滑动画 */
.checkin-dialog-enter-active {
transition: all .35s ease;
}
.checkin-dialog-leave-active {
transition: all .35s ease;
}
.checkin-dialog-enter, .checkin-dialog-leave-to{
transform: translateX(770px);
opacity: 0;
transition: all .35s ease;
}
}
\ No newline at end of file
/* Color */
$--color-primary: #1FB19E !default;
$--color-white: #ffffff !default;
$--color-black: #000000 !default;
$--color-warning: #FF8B37 !default;
$--color-danger: #EB4C44 !default;
$--color-disabled: #F3F3F3 !default;
/* Font-size */
$--font-base-size: 14px !default;
$--font-small-size: 12px !default;
/* Font-color */
$--font-color-primary: #5C5C5C !default;
$--font-color-secondary: #999999 !default;
$--font-color-disabled: #CCCCCC !default;
/* border-color */
$--border-color-base: #E2E2E2 !default;
/* table-color */
$--table-font-color: $--font-color-primary;
$--table-checkbox-color: #ffc339 !default;
\ No newline at end of file
<template>
<div id="index">
<qj-demo message="基础组件说明"></qj-demo>
<qj-business msg1="业务组件说明"></qj-business>
</div>
</template>
<script>
export default {
name: "Index",
data() {
return {};
},
created() {}
};
</script>
<style>
</style>
\ No newline at end of file
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论