win10下vue-devtools的安装和使用

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

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

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

这里介绍一篇,大家可以去看看https://blog.csdn.net/zhousen...

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

方法一:

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

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

一、下载chrome扩展插件
GitHub下载地址:

https://github.com/vuejs/vue-...
这个下载的话:

win10下vue-devtools的安装和使用

win10下vue-devtools的安装和使用

下载zip格式的文件

二、解压到本地
win10下vue-devtools的安装和使用

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

三、win+r 输入 cmd 打开命令行操作
为了方便新手,cmd也敲出来;

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

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

node.js下载博客:

https://www.cnblogs.com/goldl...
node.js的下载网址:

http://nodejs.cn/download/
由于我的电脑是64位的windows系统;

win10下vue-devtools的安装和使用

win10下vue-devtools的安装和使用

下载完成后,双击安装

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

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

win10下vue-devtools的安装和使用

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

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

win10下vue-devtools的安装和使用

输入: cnpm -v 检查版本,

win10下vue-devtools的安装和使用

四、cnpm install,npm run build 等操作
现在我们可以回到vue-devtool的下载了。。。。。。记得需要进入自己下载解压文件的位置

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

cnpm install操作完成后进行npm run buildwin10下vue-devtools的安装和使用

完成后显示:win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

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

win10下vue-devtools的安装和使用

win10下vue-devtools的安装和使用

win10下vue-devtools的安装和使用

相关推荐