美文网首页我爱编程
vue-devtools安装问题

vue-devtools安装问题

作者: 舟渔行舟 | 来源:发表于2018-04-15 10:50 被阅读0次
在我们学习vue的时候,肯定会需要去调试,那么会对应的去安装vue-devtools这个调试程序,但是经常会出现如下错误 修改路径前.jpg

问题

由于node安装路径有问题
这个可以在系统环境中进行配置,具体可以参考下边
里的环境变量设置;

(注意:最关键的是如果之前用cmd或者git都是和上图一样,那么就把vue-dectools文件删除,重新下载一份,在按照上边的步骤安装就可以)

安装步骤

1、在github下载devtools源码

https://github.com/vuejs/vue-devtools](https://github.com/vuejs/vue-devtools)

2、在cmd窗口下安装相关工具包

1)、在Windows下安装node.js

https://nodejs.org/en/

image

下载稳定版并安装,之后在cmd中输入node -v查看是否已经安装成功 ,如果有版本号显示,则代表安装成功;由于node.js自带npm,我们在cmd中输入npm –v后也会显示其版本号。

2)、配置npm的全局模块的存放路径以及cache的路径

在nodejs下建立“node_global”及“node_cache”两个文件夹,用命令npm config set prefix "D:\node\nodejs\node_global"设置global,用命令npmconfig set cache "D:\node\nodejs\node_cache"设置cache。

《3)、设置环境变量

修改用户变量PATH:把"D:\node\nodejs\node_global "加到后面;新增系统变量NODE_PATH:设置成“D:\node\nodejs\node_global\node_modules”。

4)、安装cnpm

安装命令为:npm install-g cnpm --registry=https://registry.npm.taobao.org

说明:由于许多npm包都在国外,用淘宝的镜像服务器,对依赖的module进行安装。》

《或者直接添加环境变量将对应的node以及对应的npm所在文件夹的路径添加到环境即可 2345截图20180415104401.jpg ,Path点开后 2345截图20180415104435.jpg

在path里边添加路径就可以了

5)、用cnpm安装vue

安装命令为:cnpm install vue –g//或者直接npm install

6)、安装vue命令行工具

安装命令为:cnpm installvue-cli –g

3、在vue-devtools-master工程中执行命令

执行cnpm install,下载依赖

执行npm run build,编译源程序

4、编译完成后修改数据

修改shellsèchrome目录下的mainifest.json 中的persistant为true

image

5、设置谷歌浏览器的扩展程序

勾选开发者模式,然后将刚刚编译后的工程中的shells目录下,chrome的整个文件夹直接拖拽到当前浏览器中,并选择启用,即可将插件安装到浏览器。

相关文章

  • vue-devtools安装

    vue-devtools安装 手动安装 第一步:找到vue-devtools的github项目,并将其clone到...

  • vue-devtools

    chrome调试插件vue-devtools安装步骤: 1.npm install vue-devtools 2....

  • 一些参考文章

    1、vue-devtools vue-devtools的安装与使用 2、proxyee-down proxyee-...

  • vue-devtools安装问题

    问题 由于node安装路径有问题这个可以在系统环境中进行配置,具体可以参考下边里的环境变量设置; (注意:最关键的...

  • Vue-Devtools 安装问题

    Mac系统 Chrome 浏览器安装 vue-devtools 第一步: 找到vue-devtools的githu...

  • 前端常用工具配置

    自动刷新浏览器 bower安装 安装cnpm gulp安装 Vue vue-devtools安装

  • VUE----调试工具的安装

    VUE文档中建议我们安装调试工具vue-devtools 1.下载vue-devtools: 2.解压该压缩包到自...

  • vue-devtools安装和启用问题

    一、谷歌商店要翻墙,不解释。二、crx浏览器插件链接 提取码: kp64下载crx文件,然后打开谷歌浏览器的拓展程...

  • vue-devtools 安装教程

    vue-devtools 安装教程 本文前提条件:已安装nodejs,npm使用淘宝镜像cnpm,chrome浏览...

  • chrome安装vue-devtools

    chrome安装vue-devtools 解压vue-devtools.zip包 打开chrome,输入chrom...

网友评论

    本文标题:vue-devtools安装问题

    本文链接:https://www.haomeiwen.com/subject/niokkftx.html