1、如果是没有安装vueTool，可以到chrome的扩展里面选择并安装
如果是没有科学上W的话可以github上手动down下仓库来安装
然后就是扩展Chrome插件
打开Chrome浏览器 >选择更多工具>扩展程序>打开开发者模式
点击加载已解压的扩展程序, 找到刚才生成的chrome文件夹，选择 vue-devtools >shells >chrome 放入, 安装成功如上面的图1
下方是可能可以看到vueTool了，但是在控制台就是出不来的情况
2、检查下vue.config.js的devtool是否打开，默认是true，看看是不是在非生产环境也设置为false了
3、检查看看是否有手动启用CDN加速Vuejs的文件，按官网说的，我们开发环境也需要使用开发版本的vuejs，否则很多警告就会不生效，比如props的校验器等
检查public.html的vuejs引用(如果是按脚手架的则无需关注)
确认以上问题以后，我们重新安装依赖并且重新跑脚手架编译。
js获取游戏控件方法如下：
//获取坐标位置
function getpos(e) {
var t=e.offsetTop
var l=e.offsetLeft
var height=e.offsetHeight
while(e=e.offsetParent) {
t+=e.offsetTop
l+=e.offsetLeft
假设 obj 为某个 HTML 控件。
obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。
obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。
obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。
obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。
我们对前面提到的“上方或上层”与“左方或上层”控件作个说明。
“提交”按钮的 offsetTop 指“提交”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“重置”按钮的 offsetTop 指“重置”按钮距“tool”层上边框的距离，因为距其上边最近的是 “tool” 层的上边框。
“提交”按钮的 offsetLeft 指“提交”按钮距“tool”层左边框的距离，因为距其左边最近的是 “tool” 层的左边框。
“重置”按钮的 offsetLeft 指“重置”按钮距“提交”按钮右边框的距离，因为距其左边最近的是“提交”按钮的右边框。
offsetTop 可以获得 HTML 元素距离上方或外层元素的位置，style.top 也是可以的，二者的区别是：
一、offsetTop 返回的是数字，而 style.top 返回的是字符串，除了数字外还带有单位：px。
二、offsetTop 只读，而 style.top 可读写。
三、如果没有给 HTML 元素指定过 top 样式，则 style.top 返回的是空字符串。
offsetLeft 与 style.left、offsetWidth 与 style.width、offsetHeight 与 style.height 也是同样道理。
scrollHeight: 获取对象的滚动高度。
scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
scrollWidth:获取对象的滚动宽度
offsetHeight:获取对象相对于版面或由父坐标 offsetParent 属性指定的父坐标的高度
offsetLeft:获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置
offsetTop:获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置
event.clientX 相对文档的水平座标
event.clientY 相对文档的垂直座标
event.offsetX 相对容器的水平坐标
event.offsetY 相对容器的垂直坐标
document.documentElement.scrollTop 垂直方向滚动的值
event.clientX+document.documentElement.scrollTop 相对文档的水平座标+垂直方向滚动的量
以上主要指IE之中，FireFox差异如下：
IE6.0、FF1.06+：
clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border
IE5.0/5.5：
clientWidth = width - border
clientHeight = height - border
offsetWidth = width
offsetHeight = height
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0padding: 0}
#div_id p{width:80pxheight:30pxtext-align: leftborder: 1px solid #000line-height: 30px}
#div_id p button{float:rightheight:30px}
</style>
<script src = "js/tool.js"></script>
<script>
window.onload = function(){
var div = document.getElementById("div_id")
var button = document.getElementsByTagName("button")
for(var i = 0 i < button.length - 1 i++){
button[i].onclick = function(){
alert("加入购物车成功")
var p = document.createElement("p")
var pContent = document.createTextNode(this.innerHTML)
p.appendChild(pContent)
div.appendChild(p)
var delBtn = document.createElement("button")
var delBtnContent = document.createTextNode("x")
delBtn.appendChild(delBtnContent)
p.appendChild(delBtn)
delBtn.onclick = function(){
div.removeChild(p)
}
//setCookie("购物",div.innerHTML,getDate(100))
}
}
var isTrue = false
var button1 = document.getElementById("button_id")
button1.onclick = function(){
if(isTrue == false){
button1.innerHTML ="隐藏购物车"
isTrue = true
/*if(getCookie("购物") != undefined){
div.innerHTML = getCookie("购物")
}*/
div.style.display = "block"
}else if(isTrue){
button1.innerHTML ="显示购物车"
isTrue = false
div.style.display = "none"
/*if(getCookie("购物") != undefined){
div.innerHTML = getCookie("购物")
div.style.display = "none"
}*/
}
}
}
</script>
</head>
<body>
<button>商品1</button>
<button>商品2</button>
<button>商品3</button>
<button>商品4</button>
<button>商品5</button><br/><br/>
<button id = "button_id">显示购物车</button>
<div id = "div_id" style="display:none"></div>
</body>
</html>
