如何调试Vue项目

首先给大家推荐一下我老师大神的人工智能教学网站。教学不仅零基础,通俗易懂,而且非常风趣幽默,还时不时有内涵黄段子!点这里可以跳转到网站

1、今天下载了ELM大神开源的vue2-elm项目,想更深的了解vue的内部机制,于是有了想调试程序的想法;

一开始我是直接使用chrome浏览器的开发工具进行跟踪,但是我发现根本无法调试,百度了一下Vue项目的调试法,还真是被我找到了,于是乎就做一下笔记,练练打字的技能,分享我的成长之路;

首先,先谢谢哪位大神写的vue-devtools插件,没有这个,我也没什么内容讲了;

首先当然是用git从https://github.com/vuejs/vue-devtools,将项目克隆到本地;

git clone https://github.com/vuejs/vue-devtools.git  — 这个命令太熟了;

然后切换到 vue-devtools目录下,因为我用的是Cygwin64,所以直接就 

cd vue-devtools 

既然到了这一步,那就把这个工具的依赖模块安装一下吧,阿里就是好,开源了一个自己的npm源,于是乎我用安装了阿里的cnpm,这个东西,

安装命令为:

 npm install -g cnpm –registry=https://registry.npm.taobao.org

好了,那就用阿里的吧,毕竟国内的长城还是比较厉害的,闲话少说,直接一个命令:

cnpm install 

安装完模块后,编译一下,执行

cnpm run build ; 或者 npm run build,稍等片刻,马上就好,现在改改配置吧,切换到shells/chrome/src目录下,修改一下manifest.json文件,将属性persistent修改为true,

至于为什么要改为true,我也没仔细想,各位自己可以试试不改的效果吧。

最后将这个插件安装到chrome吧。

chrome中 —》 更多工具 —》 扩展程序 —》选择开发者模式 —》加载已解压的扩展程序, 将shells/chrome这个文件夹选中,点击确定,于是乎就安装好了,就可以用这个扩展程序调试Vue项目了。。。。

点这里可以跳转到人工智能网站

发表评论