Vue系列教程(06)- Vue调试神器(vue-devtools)

简介: Vue系列教程(06)- Vue调试神器(vue-devtools)

1. 引言

通过前面的章节,我们已经了解了Vue的开发要素以及前端的基础知识了,有兴趣的同学可以参阅下:

在写第一个Vue程序之前,需要先安装好Vue的调试神器vue-devtools

打包好的插件已上传到百度网盘,如果时间赶的童鞋,可以忽略本文章,直接下载插件:

2. 下载

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

这里直接在控制台使用git下载,命令如下:

①.首先进入下载地址

$ cd /要下载的目录地址

②.克隆项目

$ git clone https://github.com/vuejs/vue-devtools

3. 安装

① 进入项目目录

$ cd vue-devtools/

② 切换到hide-inspect-button-outside-chrome-devtools-context分支

#切换到master
$ git checkout hide-inspect-button-outside-chrome-devtools-context

② 安装(比较久需等待,如果是其它分支则会报错)

$ npm install
$ npm run build
# 安装过程可能会出现
# npm ERR! code ELIFECYCLE
# npm ERR! errno 1
# npm ERR! vue-devtools@5.1.1 build: `cd shells/chrome && cross-env NODE_ENV=production webpack -- progress --hide-modules`
# npm ERR! Exit status 1
# npm ERR!
# npm ERR! Failed at the vue-devtools@5.1.1 build script.
# npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
# npm WARN Local package.json exists, but node_modules missing, did you mean to install?
# 这是没有生成node_modules这个文件,清空下缓存再重新安装就行
$ npm cache verify

4. 配置插件

① 配置插件,修改persistenttrue

$ vim ./shells/chrome/manifest.json
  "background": {
    "scripts": [
      "build/background.js"
    ],
    "persistent": true
  },

5. 添加插件

Chrome浏览器添加插件工具:

加载已解压的扩展程序:

然后选择chrom文件夹:

安装成功:

6. 使用

跑一个vue程序,并在浏览器打开控制台,可以看到Vue扩展程序:

目录
相关文章
|
3天前
|
存储 JavaScript
vue——store全局存储
【10月更文挑战第18天】Vuex 是 Vue.js 应用中非常重要的一个工具,它为我们提供了一种有效的状态管理方式。通过合理地使用 Vuex,我们可以更好地组织和管理应用的状态,提高应用的开发效率和质量。
15 1
|
2天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说,动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性,它们为我们提供了更灵活和高效的组件管理方式,使我们能够更好地构建复杂的应用界面。深入理解和掌握它们,以便在实际开发中能够充分发挥它们的优势,提升我们的开发效率和应用性能。
29 18
|
1天前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
14 7
|
1天前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
14 6
|
1天前
|
JavaScript 前端开发 开发者
Vue 的优缺点
【10月更文挑战第16天】Vue 具有众多优点,使其成为前端开发中备受青睐的框架之一。尽管它也存在一些局限性,但通过合理的应用和技术选型,这些问题可以得到一定程度的解决。在实际项目中,开发者可以根据项目的需求和特点,权衡 Vue 的优缺点,选择最适合的技术方案。同时,随着 Vue 不断的发展和完善,相信它将在前端开发领域继续发挥重要作用。
11 6
|
1天前
|
JavaScript 索引
vue 在 v-for 时给每项元素绑定事件
在 Vue 中使用 v-for 渲染列表时,可以通过给每项元素绑定事件来实现交互功能。通常使用 `@click` 等事件修饰符,结合方法或内联表达式来处理事件。例如:`<li v-for="item in items" @click="handleClick(item)">{{ item }}</li>`。
|
3天前
|
JavaScript 索引
如何在 Vue 中动态地添加或删除 Mixin
【10月更文挑战第18天】通过以上的分析和探讨,相信你对如何在 Vue 中动态地添加或删除 Mixin 有了更深入的理解。在实际开发中,你可以根据具体的需求和场景,灵活运用这些方法,以实现更加灵活和高效的应用开发。
11 4
|
2天前
|
存储 缓存 JavaScript
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
vue表单案例练习:vue表单创建一行数据及删除数据的实现与理解
15 2
|
2天前
|
JavaScript 前端开发
vue全局公共组件自动引入并注册,开发效率直接起飞!
vue全局公共组件自动引入并注册,开发效率直接起飞!
18 1
|
3天前
|
缓存 JavaScript 测试技术
Vue 代理设置
【10月更文挑战第14天】Vue 代理设置是 Vue 项目开发中非常重要的一个环节。通过合理的代理设置,我们可以解决跨域问题,提高开发效率和用户体验。
24 1