要安装 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. 解决学校在线评测系统不支持C++11的问题

    如图,我们老师搞的这个评测系统它不支持C++11.但分析错误信息可知GCC本身版本是支持C++11的,只不过没开开.平时的时候我们可以对"g++"后使用"-std=c++ ...

  2. 如何使用Shell写一个显示目录结构的命令?

    公众号关注 「开源Linux」 回复「学习」,有我为您特别筛选的学习资料~ 在Linux中使用Shell写一个显示目录结构的命令,快速寻找目录结构. 1.代码 #!/usr/bin/env bash ...

  3. 大白话详解HTTPS！

    开源Linux 回复"读书",挑选书籍资料~ 我相信大家面试的时候对于 HTTPS 这个问题一定不会陌生,可能你只能简单的说一下与 HTTP 的区别,但是真正的原理是否很清楚呢?他 ...

  4. (Bezier)贝塞尔曲在路径规划的运用

    前言 之前被安排了活,一个局部区域机器运动控制的工作,大致是一个机器位于一个极限区域时候,机器要进入一个特殊的机制,使得机器可以安全的走出来.其中用到了bezier曲线进行优化路径,今天写一下,正好也 ...

  5. docker 灵活的构建 php 环境

    地址: https://github.com/ydtg1993/server           使用docker搭建灵活的线上php环境 有时候你可能不太需要一些别人已经集成了的包或者镜像      ...

  6. 操作系统实现-loader

    博客网址:www.shicoder.top 微信:18223081347 欢迎加群聊天 :452380935 大家好呀,终于我们到了操作系统的loader部分了,loader也是操作系统中最重要的一个 ...

  7. while..else ；for；range； 基本数据类型的内置函数

    while + esle #当while循环正常循环结束后,会执行else中的代码块.如果遇到break结束循环,else中的代码将不会运行. ``` 结构: while 条件: 循环代码 else: ...

  8. Nvidia Triton使用教程：从青铜到王者

    1 相关预备知识 模型:包含了大量参数的一个网络(参数+结构),体积10MB-10GB不等 模型格式:相同的模型可以有不同的存储格式(可类比音视频文件),目前主流有torch.tf.onnx和trt, ...

  9. 299. Bulls and Cows - LeetCode

    Question 299. Bulls and Cows Solution 题目大意:有一串隐藏的号码,另一个人会猜一串号码(数目相同),如果号码数字与位置都对了,给一个bull,数字对但位置不对给一 ...

  10. 单例模式与pickle模块

    目录 设计模式之单例模式 pickle模块 设计模式之单例模式 设计模式是前辈们发明的经过反复验证用于解决固定问题的固定套路,在IT行业中设计模式总共有23种,可以分为三大类:创建型.结构型.行为型. ...