精华内容
下载资源
问答
  • 谷歌浏览器Vue devtools安装教程

    千次阅读 2019-10-26 15:02:00
    谷歌浏览器Vue devtools安装教程 第一步:在github上下载工具,网址: https://github.com/vuejs/vue-devtools 第二步:安装工具依赖(使用npm安装) 在vue-devtools-dev文件夹(下载的文件根目录)下,打开命令提示行或在...

    在这里插入图片描述

    谷歌浏览器Vue devtools安装教程

    第一步:在github上下载工具,网址:

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

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8KSH6AR3-1572073311781)(F:\CSDN发布记录\56 谷歌浏览器Vue devtools安装教程\1.jpg)]

    第二步:安装工具依赖(使用npm安装)

    在vue-devtools-dev文件夹(下载的文件根目录)下,打开命令提示行或在文件夹下shift+鼠标右键打开powershell;

    输入命令npm install 安装依赖,命令默认去找package.json中所需的依赖安装;

    在这里插入图片描述

    未安装依赖前:

    在这里插入图片描述

    安装依赖后会多一个文件夹node_modules;

    在这里插入图片描述

    第三步:修改manifest.json文件

    在这里插入图片描述

    • 将代码中 “persistent”:false改成true,并保存文件

    在这里插入图片描述

    第四步.安装完成后同在该目录下(文件所在的目录)

    在这里插入图片描述

    shift+鼠标右键进入当前目录打开powershell
    输入npm run build

    在这里插入图片描述

    第五步:在谷歌浏览器地址栏中输入

    chrome://extensions/

    在这里插入图片描述

    在这里插入图片描述

    选择工具包下的shells>chrome文件夹(建议将文件放到安全地磁盘,路径或文件损坏会导致工具无法使用)

    在这里插入图片描述

    在这里插入图片描述

    第六步:测试工具

    —>重启浏览器

    —>进入开发者工具

    —>在调试工具栏选择vue

    —>出现下图,表示安装成功(数据不必在意);但页面没有vue数据时,不会显示插件

    打开vue项目, 打开f12, 选择vue就可以使用了.

    vue是数据驱动的, 这样就能看到对应数据了, 方便我们进行调试 :

    在这里插入图片描述

    展开全文
  • vue教程 Vue教程
  • 主要介绍了vue devtools安装与使用教程,需要的朋友可以参考下
  • vue-devtools安装教程

    2019-12-17 22:54:35
    vue-devtools安装教程 前言 最近在学习Vue,为了方便调试Vue的程序,于是打算安装一个Vue的调试插件:vue-devtools 在网上找了一堆使用npm安装的方法,没有一个是有用的,总是会报一些莫名其妙的错误。 看了很多vue...

    vue-devtools安装教程


    前言

    最近在学习Vue,为了方便调试Vue的程序,于是打算安装一个Vue的调试插件:vue-devtools

    在网上找了一堆使用npm安装的方法,没有一个是有用的,总是会报一些莫名其妙的错误。

    看了很多vue-devtools安装教程后,我突然发现,,,vue-devtools是一个浏览器插件!?!?!?

    亏我在这瞎鸡儿弄了这么久。直接上Chrome 网上应用店上下不就好了。。。

    如果上不了Chrome 网上应用店的,可以使用它的国内镜像:Chrome 网上应用店

    或者说,直接使用火狐浏览器,直接在应用商店上下载就完事了

    一、简单版安装

    Chrome 网上应用店火狐插件商店上直接下载vue-devtools

    二、npm安装

    暂时还没找到完全不报错的方法。。找到了再更新

    三、安装后遇到的问题

    (1) Chrome

    1. 打开本地的vue网页时,插件图标为灰色

    在管理扩展程序中,设置Vue插件:允许访问文件网址

    Chrome允许访问文件网址

    2. 打开vue网页时,插件图标为亮了,但是开发者工具中没有Vue选项

    那是因为你的Vue工程没有开启调试功能,在Vue工程文件中添加Vue.config.devtools = true即可

    <body>
    	<div id = "app">
            ........
        </div>
        
        <script>
        	........
            Vue.config.devtools = true
        </script>
    </body>
    

    (2) Firefox

    1. 打开vue网页时,插件图标为亮了,但是开发者工具中没有Vue选项

    有两种可能:

    1. 和Chrome一样,添加Vue.config.devtools = true即可
    2. 第一次安装vue-devtools后,需重启浏览器,否则开发者工具中没有Vue选项
    展开全文
  • vue-devtools是一款基于chrome游览器的插件,用于调试vue应用,这可以极大地提高我们的调试效率。接下来我们就介绍一下vue-devtools安装。本文件Vue-DevTools插件的详细安装过程
  • vue-devtools 安装教程

    2020-07-13 09:00:50
    你总是不知道明天和意外哪个会先到,是的,本来开开心心以为装个devtools不是什么难事,谁知道就半天就栽在这里了,真是扑街啊。...vue-devtools@5.3.3 build: `cd packages/shell-chrome && cross-env N

    你总是不知道明天和意外哪个会先到,是的,本来开开心心以为装个devtools不是什么难事,谁知道就半天就栽在这里了,真是扑街啊。。。

    刚开始是在 https://github.com/vuejs/vue-devtools.git 下载的
    下载完一步一步往下走:

    1.npm install 
    2.npm build 
    到build这里就卡住了...卡住了...
    vue-devtools@5.3.3 build: 
    `cd packages/shell-chrome && cross-env NODE_ENV=production
     webpack --progress --hi
    

    然后就各种百度…
    百度的结果大部分是说让修改shells=>chrome=>mainfest.json里面persistent,将false改成true…
    在这里插入图片描述
    不好意思,还是不行,于是继续度…
    看到有人又说,让修改shells=>chrome=>webpack.config.js里面 devtool: process.env.NODE_ENV !== ‘‘production’’
    ? ‘#inline-source-map’
    : false,将’production’改成development…
    可是还是不行啊,我哭了…

    后来又挣扎了好久,才发现原来是版本问题,默认下载的是最新的版本,可能有些功能跟不上。
    下载这个就可以了https://github.com/vuejs/vue-devtools/tree/v5.1.1
    下载完依旧是
    npm install
    npm run build
    (build这一步是必要的,不然在拉近扩展程序的时候会报错:无法加载背景脚本“build/background.js”。)
    然后在浏览器的扩展程序里面把shells=>chrome文件夹加载进去就可以了
    在这里插入图片描述
    注意详细信息里面允许访问文件网址要打开。
    在这里插入图片描述
    这样就可以正常使用了,如果还是不行,就用重启大招。

    展开全文
  • vue-devtools安装教程(简单易上手)

    千次阅读 2021-03-23 17:28:48
    Vue-devtools安装教程 备注:在安装配置Vue-devtools过程中,很多博客上基本上都要求去github官网下载vue-devtools-dev压缩包。下载并解压该压缩文件后,便以管理员的方式打开命令行窗口,然后利用npm进行intsall...

    备注:在安装配置Vue-devtools过程中,很多博客上基本上都要求去github官网下载vue-devtools-dev压缩包。下载并解压该压缩文件后,便以管理员的方式打开命令行窗口,然后利用npm进行intsall(命令行:npm install),接下来输入npm install bulid。当然,利用这种方法有一个前提,便是要在此之前先安装好npm,要想安装npm,最便捷的方法是下载一个集成的node.js,而前提是要有一定的node基础。在通过上述办法来安装vue-devtools时,会出现许多错误,比如会缺少某些必要的文件或者依赖包,而为了处理这些问题,还费时费力,还会打击心态,最后还不一定能够配置成功(本人亲测有效)。对此,查询了大量的安装教程,终于成功安装了vue-devtools,特此,将本人的总结经验分享给大家,若有什么不足之处,可随时与博主进行交流讨论。

    vue-devtools文件已上传博主主页文件,想要安装vue-devtools工具的朋友可点击博主主页文件进行下载。

    1. vue-devtools解压
      点击下载vue-devtools安装工具包,下载vue-devtools文件之后,根据自己需要解压到指定盘符下,请记住你所解压的位置,我解压在D盘下。具体操作如下图所示:
      在这里插入图片描述
      在这里插入图片描述
    2. 工具安装步骤
      打开谷歌浏览器,输入网址:chrome://extensions/ ,会进入到扩展程序页面,点击开发者模式,之后点击加载已解压的扩展程序。具体操作如下图所示:
      在这里插入图片描述
      点击加载之后,找到之间解压的vue-devtools文件夹,选择chrome文件夹,点击选择之后,扩展程序便引入成功。具体的操作流程如下图所示:在这里插入图片描述
      在这里插入图片描述
      点击右上角的扩展程序,点击固定,便可看到vue-devtools工具标志,则证明vue-devtools工具安装成功。具体操作如下图所示:
      在这里插入图片描述
      若当前页面的V标志为灰色,可重新换一个网页进行尝试,可以哔哩哔哩登录网页或者其他网页为例,若亮则vue-devtools工具安装成功。具体操作如下图所示:
      在这里插入图片描述
      或者在利用Win+R快捷键,输入cmd,打开命令行之后,输入命令:vue ui,便会跳转到vue项目管理器,点击f12便可看到vue-devtools工具是否安装成功。具体操作如下图所示:
      在这里插入图片描述
      在这里插入图片描述
    3. 遇到问题及解决办法
      若遇到Vue.js not detected这种情况,点击扩展程序中的管理扩展程序,点击扩展程序的详细信息,会进入到下一个页面,将允许访问文件网址打开即可,然后切换至另一个页面便可看到V标志变亮。表示vue-devtools工具成功安装。具体操作如下图片所示:
      在这里插入图片描述
    展开全文
  • Vue搭建过程(教程参考网上各前辈提供的资料): 安装Node.js:从Node.js官网安装Node.js。 安装完成后,直接在命令行程序(win + R => 输入 cmd)中输入 node -v 验证是否安装成功。 如图,node -v后输出了...
  • 安装Vue Devtools

    2021-07-11 19:19:19
    Vue DevtoolsVue前端框架,在谷歌Chrome浏览器上,对Vue程序进行审查调试的工具。 使用Vue Devtools,开发调试Vue代码更加方便快捷直观。 2. 安装步骤 2.1 下载 github下载即可,如果使用git,直接执行命令git ...
  • Vue Devtools(Google插件)安装教程

    千次阅读 2020-08-03 19:49:29
    2. 进入 vue-devtools 目录,安装依赖 cd vue-devtools cnpm install 3. 修改 manifest.json 文件 persistent 为 true vue-devtools>packages>shell-chrome>manifest.josn ...
  • Chrome 浏览器安装Vue Devtools调试工具 (详细教程)

    万次阅读 多人点赞 2021-01-24 17:29:34
    1. 首先下载Vue Devtools调试工具 https://github.com/vuejs/vue-devtools/tree/v5.1.1 之所以安装5.1.1版本的原因就是我安装的过程中出错了,不能安装新版本,为了解决这个错误只能安装5.1.1版本的 安装最新报错...
  • 地址:https://github.com/search?q=vue-devtools git clone https://github.com/vuejs/vue-devtools.git 二、安装依赖包(npm install) 网上的文章说,要切换到 master 分支,去操作。所以我先 git branch ...
  • vue.js官网看教程,按照教程指点,可以不用脚手架开发,也可以搭建开发环境。 这里记录下搭建过程(教程参考网上各前辈提供的资料): 安装Node.js:从Node.js官网安装Node.js。  安装完成后,直接在命令行...
  • 安装vue-devtools 详细教程
  • 方法1:vue-devtools可以从chrome商店直接下载安装,非常简单,这里就不过多介绍了。不过要注意的一点就是,需要翻墙才能下载。方法2:手动安装第一步:找到vue-devtools的github项目,并将其clone到本地. vue-...
  • vuejs专题二:安装Vue Devtools

    千次阅读 2019-05-01 22:32:49
    安装Vue Devtools什么是Vue Devtools一、安装nodejs二、下载安装Vue Devtools插件附录使用淘宝 NPM 镜像相关参考 什么是Vue Devtools Vue Devtools是基于nodejs开发的扩展插件,在使用 Vue 时,我们推荐在你的浏览器...
  • vue-devtools安装使用教程

    千次阅读 2020-08-06 15:57:19
    vue-devtools安装使用教程 github下载安装包 https://github.com/vuejs/vue-devtools 解压后进入vue-devtools,执行npm install(如果npm install不生效,或者总是报错,可以用yarn install) 然后npm run ...
  • vuedevtools 离线安装

    2019-01-13 15:25:00
    vue-devtools github: https://github.com/vuejs/vue-devtools 下载文件 git clone https://github.com/vuejs/vue-devtools.git 安装依赖 npm install 打包 npm run build 安装到 chrome instal...
  • Vue devtools是一款方便与vue开发和调试的工具,然后介绍一下安装过程。(中间还是有很多坑的) github: https://github.com/vuejs/vue-devtools#vue-devtools 下面来介绍详细安装步骤: step1:安装vue插件...
  • 安装vue-dectools之前需要先安装node.js 。 二、下载devtools工具安装包 Github的下载地址:https://github.com/vuejs/vue-devtools/tree/master 三、下载好后解压到本地文件夹。打开cmd窗口,从cmd中进入解压...
  • 现在网上大多的Vue devTools安装教程都不能用,折腾了一下午,终于搞好了 1. Vue devTools的下载地址:https://github.com/vuejs/vue-devtools 选择红框中的点击下载 2. 下载解压好后,打开cmd进入解压后的vue-...
  • Vue-Devtools安装配置教程 安装dev-tools总结 个人比较懒,不写了,直接拿来用(文末附有原文链接): 1.GitHub上下载解压:下载dev-tool链接(防止以后原博主的链接失效,将压缩包上传至个人GitHub) 2.打开google...
  • Vue-Devtools安装配置教程(献给伸手党)

    万次阅读 多人点赞 2018-06-24 13:55:49
    可以先看视频教程:链接最简便的方法是用FQ来通过google应用商店进行安装,但是大多数人还是处在非FQ...查看过很多博客大多数都是,要安装Vue-Devtools,在一个github下面用git clone或者手动下载一个叫做vue-devtoo...
  • 我也是刚开始学习 Vue 看了不少博客和教程,自己测试安装可以成功,如果有按照教程安装过的,发现本文有多余或不够的步骤请留言,互相学习,共同进步。
  • 克隆 vue-devtools安装 cnpm ,并将registry设置为淘宝镜像(已安装,可跳过) npm install -g cnpm --registry=https://registry.npm.taobao.org npm安装插件是从国外服务器上下载,受网络影响大,可能出现...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,160
精华内容 464
关键字:

vuedevtools安装教程

vue 订阅