Chrome 浏览器安装Vue插件方法 (十分详细)
博主最近在研究Vue,无奈新手想安装Chrome的Vue插件,整理下安装流程:
1.首先去github下载vue.zip文件插件(还有npm安装方法这里就不介绍了自行百度)下载地址:https://github.com/vuejs/vue-devtools
2.下载后解压
3.然后通过npm下载相关依赖,可能有些同学没有安装npm,博主也是,这里介绍下安装npm的方法。
从node.js中文网站下载node.js,里面包含npm
4.下载完成直接安装,因为博主已安装成功就不截图,验证npm是否安装成功命令,打开CMD输入
node -v
npm -v
如果出现对应版本号,说明安装成功
5.下载cnpm,因为vue插件要通过cnpm下载,cmd命令如下:
npm install -g cnpm -registry=https://registry.npm.taobao.org
6.查看cnpm版本
cnpm -v
7.好了,接下来通过cnpm安装vue插件依赖
cmd命令:
先定位到刚才下载的vue插件目录里,博主安装在D盘,之后输入cnpm install。
D:\vue\vue-devtools-dev>cnpm install
下载时间比较长。
8.下载成功后接着输入npm run build 出现如下界面表示成功
9.接着修改manifest.json 里persistent 字段 为true
10.如下
11.在Chrome中 打开地址chrome://extensions/ 将D:\vue\vue-devtools-dev\shells\chrome文件夹拖入Chrome中
12.至此插件才算安装完成
13.访问一个vue页面 按F12开发者工具,可以看到VUE控制台
希望能帮助到各位同学!
Chrome 浏览器安装Vue插件方法 (十分详细)的更多相关文章
- 【原】无脑操作:Chrome浏览器安装Vue.js devtool
学习Vue.js时,Chrome浏览器安装Vue.js devtool能很方便的查看Vue对象.组件.事件等. 本文以Chrome浏览器插件Vue.js devtools_3.1.2_0.crx的安装 ...
- chrome浏览器安装vue调试器vue-devtools
chrome浏览器安装vue调试器vue-devtools https://blog.csdn.net/zhangjnwei/article/details/76693053
- Chrome浏览器安装vue-devtools插件
插件功能:方便在浏览器调试vue代码 插件git地址:https://github.com/vuejs/vue-devtools 因为chrome要FQ,打不开,所以不能直接进去安装拓展程序,只能选择 ...
- Chrome 浏览器安装 ChroPath 插件
1.下载地址 http://www.cnplugins.com/devtool/chropath/download.html 2.安装方法 a.把下载的文件更改后缀名变为压缩包,然后解压到本地:如下图 ...
- 更改Chrome浏览器安装位置的方法
因为Google Chrome独特的优势,我们很多人都在使用它,但同时我们也会发现它是默认安装在我们的系统盘的,那么是否就不能修改其安装路径了呢?其实不然,这里介绍一种方法,亲测可行. 一.正常安装 ...
- ubuntu下chrome浏览器安装flash插件(pepperflashplugin-nonfree)
安装前说明: ubuntu的Google 已经不能使用Adobe Flash了,需要用PepperFlashPlayer来替代 Adobe Flash才行. 安装步骤: 1.安装pepperflash ...
- chrome浏览器的VUE调试插件Vue.js devtools
chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...
- 安装浏览器的vue插件
安装浏览器的vue插件步骤: 1.在浏览器中打开 https://github.com/vuejs/vue-devtools Clone or download vue-devtools. 2.解压 ...
- chrome中安装Vue调试工具vue-devtools
一.前言 vue-devtools是一款基于浏览器的插件,用来调试vue应用.本篇文章将要总结的是如何在chrome中安装Vue的调试工具vue-devtools. 首先能想到的第一种方法就是直接在c ...
随机推荐
- What is the difference between try/except and assert?
assert only check if a condition is true or not and throw an exception. A try/except block can run a ...
- java在线聊天项目 客户端登陆窗口LoginDialog的注册用户功能 修改注册逻辑 增空用户名密码的反馈 增加showMessageDialog()提示框
LoginDialog类的代码修改如下: package com.swift.frame; import java.awt.EventQueue; import java.awt.event.Acti ...
- HDU-2018-奶牛的故事
这题找到递推式就好写了,递推式大致是: f=n (n<=4) f=f(n-1)+f(n-3) (n>4) 其实这题的题意,我觉得是有很大的问题的,它前后说的每年年初的意思都不一样,敬请参考 ...
- LeetCode(39) Combination Sum
题目 Given a set of candidate numbers (C) and a target number (T), find all unique combinations in C w ...
- cs229_part3
接下来就是最最最重要的一个有监督学习算法了. 支持向量机 问题背景 样本集表示: \[(x,y)\in D, x\in R^n, y\in \{-1,+1\}\] 回到之前的逻辑回归模型中: 逻辑回归 ...
- 使用Lucene的api将索引创建到索引库中
import org.apache.commons.io.FileUtils; import org.apache.lucene.document.Document; import org.apach ...
- MFC下拉框
在函数OnInitDialog()中添加一下语句可以添加选项到下拉框中 m_comboBox.AddString(_T("ALKATIP Basma Tom")); m_combo ...
- ubuntu ssh连接服务器保持长时间不断
方法: ssh -o serveraliveinterval=60 username@ip
- conda管理包
清理 conda clean --lock --tarball --package (安装包) 安装或更新包 conda install numpy=1.9.3 conda update numpy= ...
- 【管理】个人主义—>集体主义
导读:这个月作为学术部负责人,暴露了很多问题,个人的,集体的!我需要思考的,有很多.现在,我反思图书馆丢书这件事的处理方案:我虽然站在了管理层,却做着员工干的事儿.以一种个人主义.英雄主义去做事儿.却 ...