详解vue.js的devtools安装

安装

1.github下载地址：https://github.com/vuejs/vue-devtools

2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build.

3.修改manifest.json 中的persistent为true

4.打开谷歌浏览器设置--->扩展程序--》勾选开发者模式---》添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome，至此恭喜已经安装成功！！！

5.打开自己的vue项目中，如果是有vue-cli构建的项目，执行npm run dev,打开http://localhost:8080/ 服务器调试地址；至此完成devtools的安装；

使用

打开vue项目,在控制台选择vue：

5.可操作组件查看信息变化(例如分页组件)选择第一页：

选择最后一页：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 分享vue.js devtools遇到一系列问题

    分享vue.js devtools遇到一系列问题

    使用vue.js devtools遇到的磕磕绊绊,具体如下 1.首先我们需要在谷歌浏览器扩展程序中点击获取更多 2.在搜索框输入vue.js devtools,点击安装此扩展 3.检查扩展是否开启 我们需要检测我的扩展是否开启,允许文件地址是否访问,如果没有勾选文件地址我们就必须在服务器上访问. 4.修改插件配置文件 复制代码 代码如下: C:\Users\zhanglei\AppData\Local\Google\Chrome\User Data\Default\Extensions\nhdo

  • 详解vue.js的devtools安装

    详解vue.js的devtools安装

    安装 1.github下载地址:https://github.com/vuejs/vue-devtools 2.下载好后进入vue-devtools-master工程 执行npm install ----->npm run build. 3.修改manifest.json 中的persistent为true 4.打开谷歌浏览器设置--->扩展程序-->勾选开发者模式--->添加工程中的shells-->chrome的内容或者直接拖动shells-->chrome,至此恭

  • 详解 vue.js用法和特性

    详解 vue.js用法和特性

    前  言 最近用Vue.js做了一个数据查询平台,还做了一个拼图游戏,突然深深的感到了vue的强大. Vue.js是一套构建用户界面(user interface)的渐进式框架.与其他重量级框架不同的是,Vue 从根本上采用最小成本.渐进增量(incrementally adoptable)的设计.Vue 的核心库只专注于视图层,并且很容易与其他第三方库或现有项目集成.另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供有力驱动. Vue.j

  • 详解Vue.js中.native修饰符

    修饰符(Modifiers)是以半角句号 . 指明的特殊后缀,用于指出一个指令应该以特殊方式绑定.这篇文章给大家介绍Vue.js中.native修饰符,感兴趣的朋友一起看看吧. .native修饰符 官方对.native修饰符的解释为: 有时候,你可能想在某个组件的根元素上监听一个原生事件.可以使用 v-on 的修饰符 .native .例如: <my-component v-on:click.native="doTheThing"></my-component>

  • 详解Vue.js 响应接口

    Vue 可以添加数据动态响应接口. 例如以下实例,我们通过使用 $watch 属性来实现数据的监听,$watch 必须添加在 Vue 实例之外才能实现正确的响应. 实例中通过点击按钮计数器会加 1.setTimeout 设置 10 秒后计算器的值加上 20 . <div id = "app"> <p style = "font-size:25px;">计数器: {{ counter }}</p> <button @click

  • 详解Vue.js 可拖放文本框组件的使用

    详解Vue.js 可拖放文本框组件的使用

    可拖放文本框允许用户通过拖动备选项至文本框来确定输入,其实也可以说是 combobox 的一种变形. 与 combobox 相比,这种组件能让用户更加直观的看到所有备选项,并且可以是多个输入共用一组备选项. 类似的组件也曾用在 3D Windrose App,Graph Maker App 等多个 app 里. 注册组件 注册可拖放文本框组件(其实就是将封装好的这部分代码 Ctrl+C and Ctrl+V). <script type="text/x-template" id=

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • 详解Vue.js项目API、Router配置拆分实践

    前后端分离开发方式前端拥有更高的控制权 随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下(画红线部分): 前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面. 前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端

  • 详解vue.js 开发环境搭建最简单攻略

    详解vue.js 开发环境搭建最简单攻略

    做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼. 具体流程大概如下: 很难理解?没关系,我也没理解,跟着操作就行了,我是window系统. 1.安装node.js 起初是很不理解的,我学 vue.js 还要掌握

  • 详解Vue.js 2.0 如何使用axios

    Vue.js 1.0 我们常使用 vue-resource (官方ajax库), Vue 2.0 发布后作者宣告不再对 vue-resource 进行更新, 推荐我们使用 axios (基于 Promise 的 HTTP 请求客户端,可同时在浏览器和 node.js 中使用) 安装 axios 使用 npm npm install axios 使用 yarn yarn add axios 使用 axios 如同使用 vue-resource 一样使用 main.js import axios f

  • 详解vue.js+UEditor集成 [前后端分离项目]

    详解vue.js+UEditor集成 [前后端分离项目]

    首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

随机推荐