vue学习记录(一)—— vue开发调试神器vue-devtools安装
网上有些贴子少了至关重要的一步导致我一直没装上, 切记!!install后还需build,且install和build都在vue-devtools文件夹内执行
github下载地址 点击跳转
具体步骤:
第一步:找到vue-devtools的github项目,并将其clone到本地 vue-devtools
git clone https://github.com/vuejs/vue-devtools.git
第二步:安装项目所需要的npm包(进入vue-devtools编译项目文件目录,很重要!!)
建议使用npm淘宝镜像按照依赖包。地址:http://npm.taobao.org/
推荐阅读文章:国内优秀npm镜像推荐及使用
命令行安装npm淘宝镜像:
cd vue-devtools
$ cnpm install -g cnpm --registry=https://registry.npm.taobao.org
cnpm install
第三步:开始编译项目文件(使用的淘宝镜像就用cnpm!!!建议用此镜像,npm会出现各种问题)
cnpm run build
第四步:打开shells>chrome>src>manifest.json并把json文件里的 "persistent":false改成true


第五步:打开chrome浏览器扩展工具
点击开发者模式;
直接将shells——chrome文件夹直接拖到浏览器中就可以了,大功告成。
学习vue迈进了小小一步,你很棒哟!

vue学习记录(一)—— vue开发调试神器vue-devtools安装的更多相关文章
- Vue开发调试神器 vue-devtools
Vue开发调试神器: vue-devtools 1. 下载Chrome扩展插件GitHub下载地址: https://github.com/vuejs/vue-devtools 建议使用npm淘宝镜像 ...
- vue-devtools vue开发调试神器
前言: 由于vue是数据驱动的,所以这就存在在开发调试中查看DOM结构并不能解析出什么. 但是借助vue-devtools插件,我们就可以很容易的对数据结构进行解析和调试. 一.下载chrome扩展插 ...
- Vue学习记录第一篇——Vue入门基础
前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...
- Vue学习笔记(五)——配置开发环境及初建项目
前言 在上一篇中,我们通过初步的认识,简单了解 Vue 生命周期的八个阶段,以及可以应用在之后的开发中,针对不同的阶段的钩子采取不同的操作,更好的实现我们的业务代码,处理更加复杂的业务逻辑. 而在这一 ...
- Vue学习记录第一天
今天开始了Vue的学习,下面我就记录一下学习了什么. 1.什么是Vue? vue是一套基于javaScript的渐进式框架,是MVVM框架.View ——ViewModel——Model 其中Vie ...
- vue学习记录
vue中常用的指令 v-model 双向数据绑定,一般用于表单元素 v-for 对数组或对象进行循环操作,使用的是v-for <!-- 普通循环 --><li v-for=" ...
- Vue学习记录-初探Vue
写在开头 2017年,部门项目太多,而且出现了一个现象,即:希望既要有APP,也能够直接扫码使用,也能放到微信公众号里面. 从技术角度来说,APP我们可以选择原生开发,也可以选择ReactNative ...
- Vue学习记录(一)
一.引入js文件(直接采用CDN): http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js 二.简单实例: (1)HTML代码: &l ...
- Vue学习记录(二)
一.指令 指令是Vue.js中一个重要的特性,主要提供了一种机制将数据的变化映射为DOM行为.当数据变化时,指令会依据设定好的操作对DOM进行修改,这样就可以只关注数据的变化,而不用去管理DOM的变化 ...
- Vue 学习记录(一)
Vue 研究了一段时间,要学的东西挺多的. 一.基本指令 1.v-text:2.v-html:3.v-pre;4.v-cloak:5.v-once:6.v-if:7.v-else:8.v-else-i ...
随机推荐
- Python面向对象,析构继承多态
析构: def __del__(self): print("del..run...") r1 = Role("xx") del r1 结果打印del..run. ...
- wannafly-day1 Problem B-Board
思路:这个题队友过的,我的思路是枚举行和列,将除了要求位置初始0,每行最小值相减,每列最小值相减,直到除了要求的位置,别的位置都为零,则那个位置取绝对值就行了,有点麻烦应该能过,但是他没有用我给的想法 ...
- JavaSE 学习笔记之网络编程(二十三)
端口: 物理端口: 逻辑端口:用于标识进程的逻辑地址,不同进程的标识:有效端口:0~65535,其中0~1024系统使用或保留端口. java 中ip对象:InetAddress. import ja ...
- Navicat使用技巧
1.有时按快捷键Ctrl+F搜某条数据的时候搜不到,但是能用sql查出来,这是怎么回事? Ctrl+F只能搜本页数据,不在本页的数据搜不到,navicat每页只显示1000条数据.在数据多的时候nav ...
- 转载 - Struts2拦截器配置
出处:http://blog.csdn.net/axin66ok/article/details/7321430 目录(?)[-] 理解拦截器 1 什么是拦截器 2 拦截器的实现原理 拦截器的配置 使 ...
- 0213微信ZABBIX报警
简介 微信作为日常使用最频繁的工具,因此希望将微信接入zabbix报警. 微信企业号 1.申请微信企业号 申请后,请在“我的企业”页面下记录企业号的CorpID 2.添加通讯录 部门添加完成后,根据实 ...
- [CH#56]过河(贪心)
题目:http://ch.ezoj.tk/contest/CH%20Round%20%2356%20-%20%E5%9B%BD%E5%BA%86%E8%8A%82%E6%AC%A2%E4%B9%90% ...
- autoconfig
實例:假設我們有個資料夾為d:\tmp和e:\tmp ,而我們只要將d:\tmp中有異動的檔案複製到e:\tmp下的話,用法如下xcopy d:\tmp\. e:\tmp\ /D /S /Y實例:如果 ...
- [Algorithm] Determine if two strings are an anagram
The anagram test is commonly used to demonstrate how an naive implementation can perform significant ...
- varnish代理server笔记
varnish是一款开源的代理server软件.和Squid的差别是採用内存进行数据缓存. 速度很的快,并且不easy崩溃.可是奔溃之后全部数据都消失,导致全部请求全部发送至后台server端,这是其 ...