Vue核心50讲 | 第四回:Vue 官方赠送的橙色装备,岂能不要
书接上文,上一回咱们快速的了解了 Vue 的生命周期,知道了在 Vue 的生命周期中存在三个比较重要的阶段,分别是 Created、Mounted 和 Destroyed。接下来,咱们就来说一说 Vue 官方赠送的橙色装备 —— vue-devtools。
说到 vue-devtools,使用 Vue 开发的时候 Vue 官方推荐在浏览器安装 Vue Devtools 这个工具。这个时候可能你会问了,这个工具是干啥用的吖?别急,且听我慢慢道来。
咱先来说一说怎么来安装这个工具。想要安装 Vue Devtools 工具,可以访问 github.com/vuejs/vue-d… 地址,里面有比较详细的介绍。怎么滴呢?因为 Vue 官方已经把 Vue Devtools 工具开源并托管在全球最大同性社交网站 GitHub 上了。
地址告诉你了,再来说一说 Vue Devtools 工具是干啥用的吧。Vue Devtools 工具提供了一个友好的界面,在这个界面中可以审查和调试 Vue 代码。
说到这儿啊,咱得多说两句了。为啥呢?很多人对开发来说都存在着一个误区,这个误区就是认为程序员只要开发程序,敲代码就好了。其实不然,程序员几乎每天都要面对着一个问题,就是怎么解决各种各样的代码问题。这个时候,代码的审查和调试工具就尤为重要。
这么说吧!就像你吃饭,但也得把它们拉出去,这就说明筷子和马桶对你来说是同等的重要。当然了,这个比喻不是那么地恰当!你自己理解就好。
安装 Vue Devtools 工具
咱们闲言少叙,书归正传。
接下来,咱们再来说一说怎么来安装 Vue Devtools 工具。第一种方式,是最简单最直接最暴力的。就是通过 Vue 官方提供的链接,直接安装对应的版本。
这里需要说明一点的,就是 Chrome 浏览器的版本是直接访问 Chrome 应用商店的。为啥要单独说这个,因为 Chrome 应用商店在国内是被墙的,所以你懂的。
这个你是不是很想骂街,我第一次知道的时候,也想骂街。但是别急,咱还有 PlanB 呢!
就是通过 Git 工具把 Vue Devtools 工具的开源项目 clone 到本地,进行编译再自己安装到浏览器上。具体怎么做呢?
- 将 vue-devtools 项目 clone 到本地目录
git clone https://github.com/vuejs/vue-devtools.git
复制代码
- 使用 npm 来安装所需要的所有包
npm install
复制代码
- 编译项目的所有文件
npm run build
复制代码
把编译好的文件,安装到 Chrome 浏览器中
输入地址 chrome://extensions/ 进入扩展程序页面,点击“加载已解压的扩展程序”按钮。
裤裆里面着火,当然了!Vue Devtools 工具的开源项目中也提供一些其他方式的使用方式,有兴趣就自行研究吧!咱就不再这儿多费口舌了。
Vue Devtools工具的注意事项
说到这儿呢!基本上,你应该可以成功地安装上 Vue Devtools 工具了。什么?还没安装成功?!拉出去枪毙五分钟!
安装成功之后,咱们还得说一说 Vue Devtools 工具使用的一些注意事项。
第一呢,就是 Vue 核心库的文件类似于 jQuery,也是提供了两个文件,一个开发者版,一个生产版(压缩之后的)。如果你使用的是生产版本的 Vue 核心库文件的话,Vue Devtools 这个工具默认是被禁用的。换句话讲,你要想使用 Vue Devtools 工具的话,就得使用开发者版的 Vue 核心库文件。
为啥要这么做?这是为了当你使用 Vue 开发的应用正式上线之后,来保护你的核心代码逻辑的。
再有呢,要通过“file://”协议打开的 Vue 开发的网页,需要在 Chrome 浏览器的扩展程序管理面板中选中此扩展程序的“允许访问文件网址”。
好了,关于 Vue Devtools 工具咱们基本上算是介绍完了。Vue 官方赠送的这个橙色装备你接收了吗?
下一回:Vue 的初阶黑魔法 — 模板语法
转载于:https://juejin.im/post/5cf53b25e51d45776031afab
Vue核心50讲 | 第四回:Vue 官方赠送的橙色装备,岂能不要相关推荐
- 探讨Vue 数据监测原理-第四节-Vue.Set() API 介绍应用
文章目录 探讨一下Vue 数据监测的原理 本次探讨共的第四个章节 第四节:Vue.Set() API 介绍应用 1. 案例 2. 需求1 给学生添加性别 2.1 获取对象添加性别 2.2. 添加响应式 ...
- MySQL从入门到精通50讲(四)-MySQL表操作创建表及删除表
前言 声明:以下是博主精心整理的机器学习和AI系列文章,博主后续会不断更新该领域的知识: 人工智能AI实战系列代码全解析 手把手教你ML机器学习算法源码全解析 有需要的小伙伴赶紧订阅吧. MySQL ...
- 机器学习从入门到精通50讲(四)-实时数仓应用实践案例
前言 随着实时技术的不断发展和商家实时应用场景的不断丰富,有赞在实时数仓建设方面做了大量的尝试和实践.本文主要分享有赞在建设实时数仓过程中所沉淀的经验,内容包括以下五个部分: 建设背景 应用场景 ...
- Vue的50个知识点
Vue的50个知识点 文章目录 Vue的50个知识点 1. Vue的优点?Vue的缺点? 2.为什么说Vue是一个渐进式框架? 3.Vue和Rect的异同点? 4.MVVM是什么?和MVC有什么区别呢 ...
- 细谈 vue 核心- vdom 篇
很早之前,我曾写过一篇文章,分析并实现过一版简易的 vdom.想看的可以点击 传送门 聊聊为什么又想着写这么一篇文章,实在是项目里,不管自己还是同事,都或多或少会遇到这块的坑.所以这里当给小伙伴们再做 ...
- 探秘vue核心之虚拟DOM与diff算法
探秘vue核心之虚拟DOM与diff 一.真实DOM和其解析流程 所有的浏览器渲染引擎工作流程大致分为5步: 创建 DOM 树 -> 创建 Style Rules -> 构建 Render ...
- 前端知识基础之Vue知识点串讲
一.Vue知识点串讲 复习一下Vue中的核心知识点. 复习完基本的知识点以后,后面再来看一下其它的面试内容 1.基本使用 下面,先来看一段最简单的代码,如下所示: <!DOCTYPE html& ...
- VUE系列-Vue核心应用(二)
大家好,我是前端岚枫,一枚二线城市的程序媛,上篇主要跟分享了<Vue核心概念及特性 (一)>,今天主要跟大家分享我整理的vue的一些常用的核心应用,主要包括一些表单组件.自定义指令.修饰符 ...
- vue升级之路(四)-- Vuex
在 Vue.js 的项目中,如果项目结构简单, 父子组件之间的数据传递可以使用 props 或者 $emit 等方式,大家参考一下我之前写的 vue升级之路(二)-- vue组件间方法调用及数据传输 ...
最新文章
- 神经网络完成芯片设计仅需几小时
- [Swift]LeetCode75. 颜色分类 | Sort Colors
- 项目经理需要注意的四件事
- java流与文件——读写二进制数据(DataOutput + DataInput)
- java 多态_Java面向对象 —— 多态
- 教你使用squid搭配dante做代理
- 【论文写作】毕业论文写作必备技巧:修改文章的诀窍
- String.Format数字格式化参考
- 【三维路径规划】基于matlab人工蜂群算法无人机三维路径规划【含Matlab源码 021期】
- c语言设计通讯录设计报告,C语言通讯录课程设计报告--设计一个通讯录管理系统...
- 网页围棋对战闪亮登场(Flex+java)
- 经纬度度分秒转换小数
- Au入门系列之九:多轨混音
- cmos逻辑门传输延迟时间_02. 码制与逻辑运算
- 《超越宝典汽配汽修管理系统——“美容管理”模块》项目研发阶段性总结
- 战地1服务器怎么显示fps,《战地1》显示FPS帧数方法介绍 怎么显示FPS帧数
- html显示百度热搜,Python获取百度热搜的完整代码
- 申请https证书相关说明
- appium测试代码nullpoint
- 小型企业网的搭建(企业网三层架构)
热门文章
- 吃透这套架构演化图_从零搭建Web网站也不难!
- linux下安装和卸载vmware产品
- 学习嵌入式系统需要具备的条件、方法及步骤
- rpm出现error: %preun( ) scriptlet failed, exit status 1问题
- 使用ISDN和DDR技术改善远程连接性能
- python3 对象与json相互转换
- iOS进阶之底层原理-cache_t
- 汇编调用c语言函数 call printf,如何在汇编调用c语言函数?
- 文件还原工具Foremost
- ubuntu 安装docker_Docker: 教程04 - (初始化安装之在 Ubuntu 安装Docker CE)