网上关于vue-devtools的安装数不胜数,但是自己操作起来却总是遇到问题。

写下这篇随笔,以防以后忘记。

vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。当然网上教程确实多,很容易理解,但是新手操作实在会卡住。

这里介绍一篇,大家可以去看看https://blog.csdn.net/zhousenshan/article/details/81583798。

我这里写下我安装的全过程,以及走过的弯路,及解决办法。

方法一:

chrome商店直接安装

vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。

方法二:(主要讲方法二)

一、下载chrome扩展插件

GitHub下载地址:

https://github.com/vuejs/vue-devtools

这个下载的话:

下载zip格式的文件

二、解压到本地

记得看清楚文件的目录,等会需要访问到此目录,当然你也可以解压在c盘,不建议什么东西都往c盘扔;

三、win+r  输入 cmd 打开命令行操作

为了方便新手,cmd也敲出来;

像很多操作都是cnpm install,npm install  ,npm run build等操作;等下再介绍,先进入我们解压文件的目录:

进入后输入 cnpm install;可以看下,会有错误,当然如果你下载了npm,cnpm,自然不会报错;

之前卡这里很久,到处找,没有找到,毕竟新手。

npm:node.js下的包管理,下载node.js 会附带npm。然后我又跑去找node.jsde的下载方法。介绍大家可以去看这个

node.js下载博客:

https://www.cnblogs.com/goldlong/p/8027997.html

node.js的下载网址:

http://nodejs.cn/download/

由于我的电脑是64位的windows系统;

查看电脑属性就不介绍了;

下载完成后,双击安装

一路next,到了安装目录后,默认C盘,(建议改成D盘,自己新建的目录)

我的是D盘,nodejs,选好后点击next。

这里需要主要,点击add to path,不需要配置环境,不然又得去操作环境配置,还有这边下载安装完成后,不要随便改变文件夹,不然得重新配置环境变量。。。。。点击next,install,finish。。。

下载完成后会在你的文件夹有:那个.msi是我之前下的,可以删除

现在可以去操作npm 了,记得重新打开命令行,首先查看环境变量,会发现自动配好了node,和npm,你会发现现在两个居然不在同一个文件夹

输入node -v    ,npm   -v可以查看刚才下载的node,npm的版本;注意不要忘记输入空格。

现在只是安装了npm,还有cnpm需要安装

输入这个命令:      npm install -g cnpm --registry=https://registry.npm.taobao.org

输入:  cnpm -v  检查版本,

四、cnpm install,npm run build 等操作

现在我们可以回到vue-devtool的下载了。。。。。。记得需要进入自己下载解压文件的位置

虽然我也不知道是在干啥,但是我知道应该是成功了:

时间有点长,需要耐心等一等。。。。

cnpm install操作完成后进行npm run build

完成后显示:

然后进去到文件夹内,一定是shells下的chrome的manifest.json文件,

进入本地编辑器,做如下图修改,false   改成  true

五、扩展Chrome插件

打开chrome浏览器,打开设置>点击或者程序>点击开发者模式>加载已解压的扩展程序

win10下vue-devtools的安装和使用的更多相关文章

  1. win10下mysql5.7的安装与配置

    Win10下MySql5.7的安装与配置 下载 官网下载地址 选择免安装版即可, 解压 将下载的压缩包解压到你想要放置MySQL的目录,避免中文空格. 示例:D:\devtools\mysql-5.7 ...

  2. Chrome Vue Devtools插件安装和使用

    安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...

  3. Win10中Vue.js的安装和项目搭建

    一. 提前准备工作 1.Node.js环境 2.Windows10 3.npm(前端包管理工具) 4.webpack(前端资源加载/打包工具) 二. 开始安装 1..下载并安装Node.js 下载地址 ...

  4. win10 下JDK10的下载安装与环境变量配置

    一.下载 首先,要在win10 操作系统上安装jdk,就要去oracle官网下载合适的jdk版本,在这里以jdk10进行安装 下载链接:http://www.oracle.com/technetwor ...

  5. MySql 8.0.11 在win10下的zip非安装配置

     在win10使用mysql8.0.11的zip包进行配置时,搜到的教程很多坑,特此总结成功配置的方法. 1.下载非安装的zip包   mysql 8.0.11 64位 2.解压zip包 将下载的zi ...

  6. Arm架构下VUE环境的安装

    最近因为项目需要在arm环境下搭建vue环境,网上有基于Linux的 教程,路径略有不同,现整理如下 1.安装文件下载 1.下载地址:http://nodejs.cn/download/ 2.选择一个 ...

  7. win10下设置IIS、安装php7.2

    开启IIS及相关功能: 控制面板——程序和功能——启用或关闭Windows功能——勾选Internet Information Service——万维网服务——性能和功能——勾选CGI 开启成功后在 ...

  8. (转)Win10下PostgreSQL10与PostGIS安装

    版权声明:本文为博主原创文章,欢迎转载. https://blog.csdn.net/LWJ285149763/article/details/79380643 最近在使用矢量数据,因此需要用空间数据 ...

  9. Win10下 tensorflow gpu版安装

    准备: 系统环境: windows10 + Anaconda3 + Pycharm (1)环境配置: 打开Anaconda Prompt,输入清华仓库镜像,这样更新会快一些: 输入: conda co ...

  10. win10下git与gitlab安装与文件上传

    目前了解到的版本管理工具有三种:gitlab  GitHub 和 码云 个人感觉 gitlab 在公司用的较多 便于协同办公   GitHub各种资源有很多,适合个人使用   码云是中文版 便于入门 ...

随机推荐

  1. RabbitMQ面试题集锦(精选)(另附思维导图)

    1.使用RabbitMQ有什么好处? 1.解耦,系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦! 2.异步,将消息写入消息队列,非必要的业务逻辑以异步的 ...

  2. Vue Snackbar 消息条队列显示,依次动画消失的实现

    效果预览 思路 封装 Snackbar 组件: 在根路由页面下建立全局 Snackbar 控制器,统一管理 Snackbar: 通过事件通知全局 Snackbar 控制器显示消息: 实现 1. 封装 ...

  3. Vue2.0 【第一季】第6节 v-model指令

    目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...

  4. Vue2.0 【第一季】第4节 v-text & v-html

    目录 Vue2.0 [第一季]第4节 v-text & v-html 第四节 v-text & v-html Vue2.0 [第一季]第4节 v-text & v-html 第 ...

  5. ZooKeeper原理解析

    目录 ZooKeeper中的各种角色 ZooKeeper与客户端 Zookeeper节点数据操作流程 Paxos 算法概述(ZAB 协议) ZooKeeper 的选主机制 选择机制中的概念 选举消息内 ...

  6. (转)bss段和.data的是是非非

    原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201101214457186/ 一般情况下,一个程序本质上都是由 bss段.data段.t ...

  7. 【问题记录】记一次ConnectionTimeout问题排查

    最近做性能测试时,发现连接第三方系统时会有约1%的交易提示如下错误 nested exception is org.apache.commons.httpclient.ConnectTimeoutEx ...

  8. 云CRM系统安全吗

    云CRM系统有一个特点只要连接互联网就能够进行访问,这种访问可以是移动端也可以是电脑端的,而且本地CRM系统只允许电脑端访问.云CRM系统将数据存储在云服务器上,很多人就会问云CRM系统安全吗?下面和 ...

  9. Arch Linux开启SSH远程安装(1.5)

    现在你的眼前应该可以看到[root@archiso~]#的提示. 首先,建立目标机器的网络设置: 安装和升级软件包前,先让本地的包数据库和远程的软件仓库同步是个好习惯. [root@archiso~] ...

  10. Django redis的使用

    一 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...