要安装 vue-devtools-4.1.4_0

链接: https://pan.baidu.com/s/1aeUxKJEUDW0U_i6uuAZFvQ 提取码: 4btc

vue-devtools-4.1.4_0复制一份,然后修改后缀变成vue-devtools-4.1.4_0.rar

解压vue-devtools-4.1.4_0.rar

打开manifest.json

把"persistent": false 修改 "persistent": true

打开chome 的扩展程序

把vue-devtools-4.1.4_0 文件夹拉到扩展程序里面

安装完成后重新打开一个浏览器窗口,浏览器的url地址的网页里面含有vue,按F12就可以展示的了

比如在chome 里面安装  JetBrains IDE Support ,这个可以连接idea

*****要用vue功能的话,要先在电脑上安装nodejs

安装完成nodejs后cmd检查,可以用以下的命令

node -v        node版本
npm -v          查看npm版本(插件管理工具)

因为外网下载慢,要把下载指向淘宝镜像(类似于阿里云的maven)

npm config set registry https://registry.npm.taobao.org         配置淘宝镜像

npm install nrm -g 下载npm插件
nrm ls 查看所用的镜像

后在idea 里面创建一个Static Web项目

在Terminal里面敲打命令

npm init -y 在idea 里面安装初始化
npm install vue -save 本地安装(也可用后面的命令                 npm install vue -global  全局安装vue)

重新idea 即可

hello.html代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<input type="text" v-model="num"> <button @click="num++"></button>
<h1>{{name}} 非常帅 <br/>
{{num}} 位女神为其着迷
</h1> 调试需要安装在chome安装JetBrains IDE Support
调试node,chome安装,vue-devtools-4.1.4_0 </div>
<script src="node_modules/vue/dist/vue.js">
</script>
<script>
const app=new Vue({
el:"#app", //element,vue作用的标签
data:{
name:"胡歌",
num:1
}
});
</script>
</body>
</html>

在chome浏览http://localhost:63342/项目名称/hello.html

如  http://localhost:63342/vue-demo/hello.html

Chrome安装Vue.js devtool F12无效的更多相关文章

  1. 【原】无脑操作:Chrome浏览器安装Vue.js devtool

    学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...

  2. 解决游览器安装Vue.js devtools插件无效的问题

    一: 打开自己写的一个vue.js网页,发现这个图标并没有亮起来,还是灰色 解决方案:  1.我们先看看Vue.js devtools是否生效,打开Bilibili(https://www.bilib ...

  3. Vue.js devtool插件下载安装及后续问题解决

    在中国,你是无法使用谷歌应用商店,所以你下载插件,要使用一些别的手段,一种是下载源码编译,另一种是通过第三方网站.第一种不适合小白,所以现在介绍第二组. 下载插件网站 国外网站:https://www ...

  4. Vue.js devtool插件安装后无法使用的解决办法

    初次使用Vue.js devtool插件的新人在安装了Vue.js devtool插件后,都会经常有一个疑问.我在chrome浏览器里面已经成功安装好Vue.js devtool插件,怎么点击后提示v ...

  5. chrome调试vue.js的插件:vue.js devtools

    1.什么是vue.js devtools? vue.js devtools是chrome的一款插件,用来调试vue的一款神器. 2.为什么下载vue.js devtools? 由于vue是数据驱动的, ...

  6. 【转】安装Vue.js的方法

    安装vue.js的方法   一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量 ...

  7. Mac安装vue.js开发环境

    Mac安装vue.js开发环境 DannyHooDanny的专栏订阅 一.vue.js开发环境 二.初始化一个vue.js项目 三.vue.js项目打包部署 本来以为在Mac上搭建vue.js的环境挺 ...

  8. IDEA安装vue.js插件后,new没有Vue component

    首先要安装vue相关的插件vue.js 但是很多人安装vue.js右键发现没有vue Componment,解决方法如下 Settings>Editor>File and Code Tem ...

  9. VUE.js devtool 安装简易教程(转)

    最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ的状态 尝试过安装Node的方法来安装,但是极其不建议用这个方法安装,非常麻烦,而且必须要有node的基础,非常不接地 ...

随机推荐

  1. JAVA IDEA连接mysql遇到的问题

    Mysql-connector-java驱动问题 因为缺乏驱动而无法成功连接数据库 下载驱动(教程) 相关网址 安装驱动 简单图示

  2. WIN10 使用POWERSHELL 设置单应用KIOSK模式(win10家庭版或企业版)

    win10 使用PowerShell 设置单应用kiosk模式 win10 家版或企业版PowerShellshell 启动器 v1Autologon.exe 注意事项 win10 家庭版或企业版. ...

  3. ucore lab5 用户进程管理 学习笔记

    近几日睡眠质量不佳,脑袋一困就没法干活,今天总算时补完了.LAB5难度比LAB4要高,想要理解所有细节时比较困难.但毕竟咱不是要真去写一个OS,所以一些个实现细节就当成黑箱略过了. 这节加上了用户进程 ...

  4. Linux磁盘分区-mount挂载

    Linux磁盘分区类型 磁盘存储术语CHS head:磁头  磁头数=盘面数 track:磁道  磁道=柱面数 sector:扇区,512bytes cylinder:柱面 1柱面=512*secto ...

  5. 一文读懂 Kubernetes 容器网络

    点击上方"开源Linux",选择"设为星标" 回复"学习"获取独家整理的学习资料! 在Kubernetes中要保证容器之间网络互通,网络至关 ...

  6. JAVA数组案例!

    数组的用例 一.案例需求: 有这样的一个数组,元素是{68,27,95,88,171,996,51,210}.求出该数组中满足要求的元素和, 要求是:求和的元素个位和十位都不能是7,并且只能是偶数如何 ...

  7. Object类和对象类型转换

    学习内容:Object类和对象类型转换 一.Object类 1.Object类是所有类的父类,是Java类层中最高层的类. 2.getClass()方法:返回对象执行时的Class实例,然后用此实例调 ...

  8. Java中如何快捷的创建不可变集合

    在Java 9中又新增了一些API来帮助便捷的创建不可变集合,以减少代码复杂度. 本期配套视频:Java 9 新特性:快速定义不可变集合 常规写法 以往我们创建一些不可变集合的时候,通常是这样写的: ...

  9. 20212115 实验三 《python程序设计》实验报告

    实验报告 20212115<python程序设计>实验三报告 课程:<Python程序设计>班级: 2121姓名: 朱时鸿学号:20212115实验教师:王志强老师实验日期:2 ...

  10. 行列式&矩阵树定理

    行列式: 参考 oi-wiki 定义 对于一个\(n*n\)的矩阵A行列式取值(标量) \(det(A)=|A|=\sum\limits_p(-1)^{\tau(p)}\prod\limits_{i= ...