win10下vue-devtools的安装和使用

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

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

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

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

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

方法一：

chrome商店直接安装

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

方法二：（主要讲方法二）

一、下载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的下载网址：

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

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

下载完成后，双击安装

一路next，到了安装目录后，默认C盘，（建议改成D盘，自己新建的目录）

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

 

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

 

 

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

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