初学Vue + Vue调试神器 vue-devtools 的安装

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tel13259437538/article/details/79953744

Write By Monkeyfly

以下内容均为原创,如需转载请注明出处。

前提

  • 今天准备开始学vue.js了,不为别的,只是因为我女朋友毕设项目的前端是使用vue开发的,而我作为一个前端开发却无能为力,你说可不可笑。
  • 她需要一个会vue的前端帮她做界面,而我虽然身为一个前端开发,但是并不会vue,所以作为男朋友的我本身就很自责。
  • 现阶段的情况是:我只是知道有这些框架,再加上公司的项目只用jQuery,其他新的框架也用不上,所以也一直没机会去接触和学习。毕竟,自己也知道自己几斤几两,JavaScript学的就不怎么样,目前还停留在基础进阶的阶段,肯定就谈不上学其他框架了。
  • 我深知自己能力弱,说实话,除了jQuery这个轻量级的js框架会用,其他js框架可以说是都不沾边。我真的是很无奈,可以说是一点忙也帮不上,只能眼睁睁看着困难摆在她的面前却束手无策,这种感觉很难受。
  • 而且作为她来说,男朋友是一个做前端的,需要求助的时候我却帮不了她,我只能回一句:我不会,你找其他人帮你吧。而她呢,只能去求助他人。在她看来,她心里肯定对我充满了失望和不满。

所以说,不管出于什么理由,始终都不能停下学习的脚步,不会就去学嘛,对不对,我就不信还没有学不会的东西。而且,学了肯定没有坏处,就算现在用不上,说不定日后也会用上的。

话不多说了,那就开始吧!

vue学习之旅

第一步:从官方的vue教程开始学起

Vue.js【官网】—— 点击查看

这里写图片描述

建议有一定的基础再来学(如下图所示)

这里写图片描述

何为vue?【官方介绍 — Vue.js —— 点击查看】

  • 首先,关于vue我要说的是,我听到最多的发音是V [vi:] U [ju:] E [i:],即根据vue的字母组成,然后按照字母本身的发音来读,即vue
  • 官方的读法是:Vue (读音 /vjuː/,类似于 view)
  • 它是一套用于构建用户界面的渐进式框架。在这里,提取到两个关键词,构建用户界面渐进式框架。(目前来说,我也不懂,先继续往下看吧)
  • 它与其它大型框架的区别:Vue 被设计为可以自底向上 逐层应用。(可能这就是所谓的渐进式吧,还是不懂)
  • Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。
  • Vue.js框架是什么,为什么选择它?(我也是一知半解的,具体的看这里的介绍吧)

我的理解:

  • vue是响应式的,即JavaScript代码中变量值的改变会反映到HTML元素中,也就是说,实现了数据和视图(HTML元素)的绑定。
  • 以前的做法:如果要改变DOM元素中的内容,我们通常都是使用JavaScript提供的DOM API,先获取到相应的DOM元素,然后进行动态的操作。因为首先要定位到你要修改的DOM元素,然后才能修改数据。如果要改动多个元素的话,我们就需要频繁的进行手动DOM操作。
  • 现在的改变:我们无需关心DOM的更新了,只需要改变数据就可以了。因为数据和视图是绑定的,数据的改变会影响到视图,所以vue帮我们自动更新了视图。

尝试vue

尝试Vue.js 最简单的方法就是,自己创建一个.html文件,然后引入vue.js文件,跟着官方的教程自己写一个Hello World的案例。这样做,可以加深自己对vue的理解。

引入方式(推荐新手使用)

<!-- 开发环境版本,包含了用帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

安装教程——点击这里查看(新手不建议看)

以下是官方的说辞:

请注意我们不推荐新手直接使用 vue-cli,尤其是在你还不熟悉基于Node.js的构建工具时。

所以,作为新手来说,不要着急学太多的东西,先来体验一下vue的魔力,然后再去学习其他的安装方法。

复制粘贴下面的代码就能直接运行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个Vue应用</title>
    <!-- 开发环境版本,包含了用帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <!-- 声明式渲染 -->
    <!-- Vue.js的核心是一个系统,允许采用简洁的模板语法来声明式地将数据渲染进DOM的系统。 -->
    <div id="app">
        {{message}}
    </div>
    <script>
        var app = new Vue({
            el:'#app',
            data:{
                message:'Hello Vue!'
            }
        });
    </script>
</body>
</html>

至此,我们已经成功创建了第一个Vue应用!

效果图(不足为奇,已经见怪不怪了)

这里写图片描述

分析(其实好奇的是代码中的语法)

(1)首先,声明一下你要渲染的区域。也就是说,先创建一个HTML元素,声明一下哪个HTML元素需要使用vue的语法。其实就是声明vue语法的作用域,不声明是没办法使用vue的语法的。
(2)给HTML元素设置一个class或者id,用于让vue语法找到该元素(指定的渲染区域)。
(3)在script标签内使用了vue简洁的模板语法,即

//创建了一个vue的实例
var app = new Vue({
     el:'id或class',
     data:{
         键名:值
     }
});

显而易见,其中做了两件事情:

  • 声明vue语法要应用的范围,或者说要渲染的区域。
  • 定义好需要绑定的数据。因为数据是和视图绑定起来的。视图就是指HTML元素。

(4)将数据绑定到视图当中。div中双花括号的语法{{}},其实这个整体就是动态绑定的数据。{{}}中放的是变量名或者表达式变量或者表达式的值可以在模板语法中的data进行改变。
(5)如果要更新视图,那么只需要改变数据就可以了。数据的改变的同时,视图也会自动进行更新。

结论:
其实,Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联,所有东西都是响应式的。

问:我们要怎么确认呢?
答:打开你的浏览器的 JavaScript 控制台 ,并修改 app.message 的值,你将看到视图相应地更新。

这里写图片描述

上面的动态图演示的是,谷歌浏览器已经安装完vue-devtools插件的情形。
(注:此情形特指控制台中的黑绿色标识,并非指代码的操作)

第二步: Vue调试神器vue-devtools 的安装

极速安装Vue调试神器 vue.js devtools(5分钟搞定)—— 点击查看最近安装方法

最新提示:(写于2018/04/17 凌晨01:27)

  • 下面的这种方式耗时耗力,后来又发现一种全新的极速安装的方法,直接点击上方文字查看最新方法。
  • 如果想要坚持使用旧方法的请忽略上面这句话,继续往下走就行了。

问题:为什么要安装该插件:
答案 :因为vue是进行数据驱动的,仅仅从chrome浏览器的控制台进行element查看,是看不到数据的动向的。

未安装的情形:

这里写图片描述

浏览器的控制台会提示你:

安装前的准备

  • 因为安装依赖需要Node.js环境。所以,第一件事就是安装Node.js
  • 安装完成之后,从github的下载地址将该插件下载下来:https://github.com/vuejs/vue-devtools

win系统下nodejs安装及环境配置 - CSDN博客

安装步骤

  • 下载之后,解压文件,然后复制粘贴解压的文件,放在某个盘的某个文件夹下面。
  • 然后通过Windows+R这个快捷键打开“运行”对话框,输入cmd,进入命令行。
  • 在命令行内,进入到vue-devtools-master目录下。
  • 先执行npm install命令;(执行过程比较长,请耐心等待...)
  • 执行成功后,再执行npm run build命令;
  • 这两个命令都执行成功,就可以关闭命令行了。
  • 然后进入C:\Software\vue-devtools-master\shells\chrome目录下,修改mainifest.json 文件中的persistent属性的值为true。(根据自己安装的目录去找mainifest.json 文件)
  • 打开谷歌浏览器 —— 点击右上角纵向排列的三个点选项 —— 更多工具 —— 右上角勾选开发者模式(有的已默认勾选了)—— 加载已解压的扩展程序 —— 找到本地磁盘中vue-devtools-master目录下的chrome文件夹 —— 选择该文件夹并点击确定按钮。

后来才发现,其实安装过程存在进度条的,进度条其实就是图中的#号。(如下图所示)

1.执行npm install命令

这里写图片描述

2.执行npm run build命令

这里写图片描述

3.修改mainifest.json 文件

这里写图片描述

这里写图片描述

4.打开谷歌浏览器,设置开发者模式,添加扩展程序文件

这里写图片描述

至此,恭喜vue devtools插件已经安装成功!!

注:Vue.js devtools插件在chrome浏览器安装成功后,在浏览器的右上角会存在一个插件图标。

5.启动vue devtools插件

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

这里写图片描述

7.点击vue,查看数据

这里写图片描述

可能会遇到的问题

1.在命令行执行npm install时,会长时间停留在fetchMetadata

2.npm install 获取 fetchMetadata 的阶段非常慢,有什么方法可以加速呢?

3.Vue.js devtool插件安装后无法使用,出现提示“vue.js not detected”的解决办法

阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页