win10下vue-devtools的安装和使用
网上关于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的安装和使用的更多相关文章
- win10下mysql5.7的安装与配置
Win10下MySql5.7的安装与配置 下载 官网下载地址 选择免安装版即可, 解压 将下载的压缩包解压到你想要放置MySQL的目录,避免中文空格. 示例:D:\devtools\mysql-5.7 ...
- Chrome Vue Devtools插件安装和使用
安装:fq后在chrome应用商店搜索 Vue Devtools并安装,安装成功后浏览器右上角有vue的图标 安装完毕后,打开含有vue框架的网站,这是vue图标会变亮,进入开发者工具,再右侧vue选 ...
- Win10中Vue.js的安装和项目搭建
一. 提前准备工作 1.Node.js环境 2.Windows10 3.npm(前端包管理工具) 4.webpack(前端资源加载/打包工具) 二. 开始安装 1..下载并安装Node.js 下载地址 ...
- win10 下JDK10的下载安装与环境变量配置
一.下载 首先,要在win10 操作系统上安装jdk,就要去oracle官网下载合适的jdk版本,在这里以jdk10进行安装 下载链接:http://www.oracle.com/technetwor ...
- MySql 8.0.11 在win10下的zip非安装配置
在win10使用mysql8.0.11的zip包进行配置时,搜到的教程很多坑,特此总结成功配置的方法. 1.下载非安装的zip包 mysql 8.0.11 64位 2.解压zip包 将下载的zi ...
- Arm架构下VUE环境的安装
最近因为项目需要在arm环境下搭建vue环境,网上有基于Linux的 教程,路径略有不同,现整理如下 1.安装文件下载 1.下载地址:http://nodejs.cn/download/ 2.选择一个 ...
- win10下设置IIS、安装php7.2
开启IIS及相关功能: 控制面板——程序和功能——启用或关闭Windows功能——勾选Internet Information Service——万维网服务——性能和功能——勾选CGI 开启成功后在 ...
- (转)Win10下PostgreSQL10与PostGIS安装
版权声明:本文为博主原创文章,欢迎转载. https://blog.csdn.net/LWJ285149763/article/details/79380643 最近在使用矢量数据,因此需要用空间数据 ...
- Win10下 tensorflow gpu版安装
准备: 系统环境: windows10 + Anaconda3 + Pycharm (1)环境配置: 打开Anaconda Prompt,输入清华仓库镜像,这样更新会快一些: 输入: conda co ...
- win10下git与gitlab安装与文件上传
目前了解到的版本管理工具有三种:gitlab GitHub 和 码云 个人感觉 gitlab 在公司用的较多 便于协同办公 GitHub各种资源有很多,适合个人使用 码云是中文版 便于入门 ...
随机推荐
- RabbitMQ面试题集锦(精选)(另附思维导图)
1.使用RabbitMQ有什么好处? 1.解耦,系统A在代码中直接调用系统B和系统C的代码,如果将来D系统接入,系统A还需要修改代码,过于麻烦! 2.异步,将消息写入消息队列,非必要的业务逻辑以异步的 ...
- Vue Snackbar 消息条队列显示,依次动画消失的实现
效果预览 思路 封装 Snackbar 组件: 在根路由页面下建立全局 Snackbar 控制器,统一管理 Snackbar: 通过事件通知全局 Snackbar 控制器显示消息: 实现 1. 封装 ...
- Vue2.0 【第一季】第6节 v-model指令
目录 Vue2.0 [第一季] 第6节 v-model指令 第6节 v-model指令 一.一个最简单的双向数据绑定代码: 二.修饰符 三.文本区域加入数据绑定 四.多选按钮绑定一个值 五.多选绑定一 ...
- 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 第 ...
- ZooKeeper原理解析
目录 ZooKeeper中的各种角色 ZooKeeper与客户端 Zookeeper节点数据操作流程 Paxos 算法概述(ZAB 协议) ZooKeeper 的选主机制 选择机制中的概念 选举消息内 ...
- (转)bss段和.data的是是非非
原文地址:http://zqwt.012.blog.163.com/blog/static/12044684201101214457186/ 一般情况下,一个程序本质上都是由 bss段.data段.t ...
- 【问题记录】记一次ConnectionTimeout问题排查
最近做性能测试时,发现连接第三方系统时会有约1%的交易提示如下错误 nested exception is org.apache.commons.httpclient.ConnectTimeoutEx ...
- 云CRM系统安全吗
云CRM系统有一个特点只要连接互联网就能够进行访问,这种访问可以是移动端也可以是电脑端的,而且本地CRM系统只允许电脑端访问.云CRM系统将数据存储在云服务器上,很多人就会问云CRM系统安全吗?下面和 ...
- Arch Linux开启SSH远程安装(1.5)
现在你的眼前应该可以看到[root@archiso~]#的提示. 首先,建立目标机器的网络设置: 安装和升级软件包前,先让本地的包数据库和远程的软件仓库同步是个好习惯. [root@archiso~] ...
- Django redis的使用
一 简介 redis是一个key-value存储系统.和Memcached类似,它支持存储的value类型相对更多,包括string(字符串).list(链表).set(集合).zset(sorted ...