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

分手后的思念是犯贱 2022-05-20 10:29 256阅读 0赞

**Write By Monkeyfly**

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

### 前提 ###

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

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

**`话不多说了，那就开始吧！`**

### vue学习之旅 ###

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

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

![这里写图片描述][70]

**建议有一定的基础再来学（如下图所示）**

![这里写图片描述][70 1]

**何为vue？**[【官方介绍 — Vue.js —— 点击查看】][_ Vue.js _]

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

**[安装教程——点击这里查看（新手不建议看）][Link 1]**

**以下是官方的说辞：**

请注意我们不推荐新手直接使用 `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>
        
        
        <div id="app">
            {
       {message}}
        </div>
        <script>
            var app = new Vue({
                el:'#app',
                data:{
                    message:'Hello Vue!'
                }
            });
        </script>
    </body>
    </html>

**至此，我们已经成功创建了第一个`Vue`应用！**

**效果图`（不足为奇，已经见怪不怪了）`**

![这里写图片描述][70 2]

**分析`（其实好奇的是代码中的语法）`**

（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` 的值，你将看到视图相应地更新。**

![这里写图片描述][70 3]

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

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

[极速安装Vue调试神器 vue.js devtools（5分钟搞定）—— 点击查看最近安装方法][Vue_ vue.js devtools_5_]

**`最新提示：（写于2018/04/17 凌晨01:27）`**

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

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

**未安装的情形：**

![这里写图片描述][70 4]

**浏览器的控制台会提示你：**

*  下载`vue DevTools`扩展以获得更好的开发体验；（**插件的`GitHub`地址：**[https://github.com/vuejs/vue-devtools][https_github.com_vuejs_vue-devtools]）
 *  您正在以开发模式运行`Vue`。当为生产部署时，一定要打开生产模式。   
    更多提示见 [https://vuejs.org/Guide/ployment.html][https_vuejs.org_Guide_ployment.html]。

**安装前的准备**

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

[win系统下nodejs安装及环境配置 - CSDN博客][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`命令**

![这里写图片描述][70 5]

**2.执行`npm run build`命令**

![这里写图片描述][70 6]

**3.修改`mainifest.json` 文件**

![这里写图片描述][70 7]

![这里写图片描述][70 8]

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

![这里写图片描述][70 9]

**至此，恭喜`vue devtools`插件已经安装成功！！**

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

**5.启动`vue devtools`插件**

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

![这里写图片描述][70 10]

**7.点击`vue`，查看数据**

![这里写图片描述][70 11]

**可能会遇到的问题**

[1.在命令行执行`npm install`时，会长时间停留在`fetchMetadata`][1._npm install_fetchMetadata]

[2.`npm install` 获取 `fetchMetadata` 的阶段非常慢，有什么方法可以加速呢？][2._npm install_fetchMetadata]

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

原文链接：[https://blog.csdn.net/tel13259437538/article/details/79953744][https_blog.csdn.net_tel13259437538_article_details_79953744]

[Vue.js_]: https://cn.vuejs.org/
[70]: /images/20220520/fa53122405c3449bafd98959093a7d8c.png
[70 1]: /images/20220520/021611f7c51a4e6a9e3c0739563aa540.png
[_ Vue.js _]: https://cn.vuejs.org/v2/guide/
[Vue.js]: http://mp.weixin.qq.com/s/9_UoacK_uh_F-CAubxWmYQ
[Link 1]: https://cn.vuejs.org/v2/guide/installation.html
[70 2]: /images/20220520/7c74cc96354b49aa882391227796f967.png
[70 3]: /images/20220520/8e5ba9bc3dd04eff8e54c7e900f75e64.png
[Vue_ vue.js devtools_5_]: https://blog.csdn.net/tel13259437538/article/details/79968977
[70 4]: /images/20220520/0e2dd705583a4b37a82b4ca7a6d969c6.png
[https_github.com_vuejs_vue-devtools]: https://github.com/vuejs/vue-devtools
[https_vuejs.org_Guide_ployment.html]: https://vuejs.org/Guide/ployment.html
[win_nodejs_ - CSDN]: https://blog.csdn.net/pengpegv5yaya/article/details/51885829
[70 5]: /images/20220520/1e1b2eef82a8424598d32a10008a3e25.png
[70 6]: /images/20220520/0e2d8dc8c1fa4c1fb4bfaccef9492f41.png
[70 7]: /images/20220520/4c75ec0479aa4d9ea1d56a16d8ab2b91.png
[70 8]: /images/20220520/0c2dc5b3114b46b8a234ab87ca791e1b.png
[70 9]: /images/20220520/44798558818a4467bb6b5f485cdcf584.png
[70 10]: /images/20220520/6bb9d9f4282a427fa46d8025e5f0a0f6.png
[70 11]: /images/20220520/e8a16194060c44ce8c144a18af23ca40.png
[1._npm install_fetchMetadata]: https://blog.csdn.net/hushilin001/article/details/78126836
[2._npm install_fetchMetadata]: https://www.v2ex.com/amp/t/382755
[3.Vue.js devtool_vue.js not detected]: http://www.cnplugins.com/tool/fix-vue-js-not-detected.html
[https_blog.csdn.net_tel13259437538_article_details_79953744]: https://blog.csdn.net/tel13259437538/article/details/79953744