Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件

本文首发：《Vue DevTools 使用指南 - 如何安装和使用 Vue DevTools 调试 Vue 组件》

Vue Devtools 是 Vue 官方发布的调试浏览器插件，可以安装在 Chrome 和 Firefox 等浏览器上，直接内嵌在开发者工具中，使用体验流畅。Vue Devtools 由 Vue.js 核心团队成员 Guillaume Chau 和 Evan You 开发。

在本教程中，我们首先来一起搭建一个测试实例，然后在浏览器上安装 Vue DevTools，然后大家可根据教程一步一步调试自己搭建的 APP，从而熟悉使用 Vue Devtools。

另外，这个世界已经悄然发生变化，现在根本无需写任何前端代码，直接使用卡拉云 —— 新一代低代码开发工具帮你搭建后台工具，卡拉云可一键接入常见数据库及 API ，无需懂前端，内置完善的各类前端组件，无需调试，拖拽即用。原来三天的工作量，现在 1 小时搞定，谁用谁知道，用上早下班，详见本文文末。

我们开始吧。

第 1 步：创建一个测试实例 APP

我们首先用 Vue 搭建一个简单的测试 APP，本教程将用这个 APP 给大家示范如何使用 Vue Devtools 工具调试 Vue APP。

搭建过程也非常简单，建议大家跟着本教程自己也动手操作一遍，一下子就学会了。

我们来做一套学英语的学习卡片 Ap，在接下来的章节中，我们使用 Vue Devtools 来监测这个简单的 App

首先，我们通过 Vue CLI 生成一个新 Vue APP，请打开你的终端，运行：

vue create flashcard-kalacloud

然后根据安装界面提示选择 Manually select features ，然后选择 ◉ Bable 和 ◉ Vuex 然后回车并继续根据提示选择：

创建项目后，打开favorite-airports终端窗口并cd进入favorite-airports根文件夹。更改目录后，使用以下mkdir命令创建一个新目录：

创建项目完成后，CD 到项目根目录，然后我们先来创建一个用于存放数据到 js 文件

首先我们先建一个放数据的目录

mkdir src/data

接着，我们来创建一个单词列表的 js 文件放在 data 目录下：

文件位置：/src/data/wordlists.js

export default [
    {
      "word":"apple",
      "pronunciation":"[ˈæp(ə)l]",
      "paraphrase":"n.苹果",
      "exampleeg":"Sling me an apple, will you? ",
      "examplecn":"扔个苹果给我，好吗？",
    },
    {
      "word": "banana",
      "pronunciation": "[bəˈnɑːnə]",
      "paraphrase": "n. 香蕉；喜剧演员",
      "exampleeg": "He slipped on a banana skin. ",
      "examplecn":"他踩在香蕉皮上滑倒了。"
    },
    {
      "word": "happy",
      "pronunciation": "[ˈhæpi]",
      "paraphrase": "adj. 快乐的；幸福的，使人高兴的；",
      "exampleeg": "a happy smile/face",
      "examplecn":" 快活的微笑╱面容",
    },
    {
      "word": "desk",
      "pronunciation": "[desk]",
      "paraphrase": "n. 书桌&#