VUE配置vue |
您所在的位置:网站首页 › vuedevtools安装教程 › VUE配置vue |
VUE配置vue-devtools调试工具及安装方法
时间:2021-08-29 来源:互联网 编辑:宝哥软件园 浏览:次
1.通过Git在本地克隆项目 git clone https://github.com/vuejs/vue-devtools.git2. git进入vue-devtools所在的目录,然后运行以下两条指令。 首先运行npm安装以安装项目依赖项 运行npm运行构建来编译和生成 运行这两条指令需要一定的时间。请耐心等待。成功构建后,如下图所示:
3.修改安装目录vue-dev tools \ shell \ chrome中的manifest.json文件。将持久性参数更改为true,如下图所示:
4.将扩展添加到chrome浏览器中 A.打开浏览器扩展程序(也可以直接在地址栏输入chrome://extensions/打开)
B.打开扩展程序后,打开开发人员模式,单击按钮加载解压缩的扩展程序
C.选择vue-devtools shell目录下的Chrome文件夹,成功后出现下图: 加载成功后,先启用,然后点击旁边的刷新按钮,浏览器右上角会出现一个Vue logo图标
5.此调试工具的安装已完成。 注意事项:请在开发模式下使用vue调试工具,但不要在生产环境下使用。即在vue.min.js文件下,调试工具无效。 我们来看看vue调试工具vue-devtools的安装方法 先驱 Vue-devtools是一个基于chrome浏览器的插件,用于调试Vue应用。这个vue调试工件可以大大提高我们的调试效率。帮助我们快速调试和开发vue应用程序。 第一步: 我们可以从github找到vue-devtools项目并在本地下载。下载vue-devtools链接。 克隆方法:克隆https://github.com/vuejs/vue-devtools.git 第二步: 解压缩下载的文件,进入vue-devtools目录,安装项目所需的依赖包。 安装方式:npm安装或者cnpm安装(注意:cnpm命令是国产镜像,会更快) 第三步: 编译项目文件。 编译方法:npm运行构建 第四步: 修改安装目录vue-dev tools \ shell \ chrome中的manifest.json文件。如果持久参数更改为真,访问协议是否包括: 1.http://*/*;2.https://*/*;3 . file :///*;这三种情况
第五步: 添加到浏览器: 添加方法:在chrome浏览器中输入地址:“chrome://extensions/”进入扩展页面,然后点击“加载解压后的扩展.”按钮;选择vue-devtoolsshell目录下的Chrome文件夹;您还需要允许访问文件地址。如果没有看到“加载解压缩的扩展程序”按钮.首先检查“开发人员模式”。如下图:
第六步: 使用: 打开我们的vue应用程序,打开调试,点击vue扩展图标使用它。下图:
注意:如果点击vue扩展图标,仍然会提示:在此页面检测到VUE.jsis。打开开发工具,寻找VUE面板。可以检查是否使用的是vue.min.js的压缩版,如果默认使用VUE.min.js作为生产环境,需要改为vue.js。 结束。 摘要 以上是边肖介绍的VUE配置vue-devtools的调试工具和安装方法。希望对大家有帮助。如果你有任何问题,请给我留言,边肖会及时回复你。非常感谢您对我们网站的支持! 版权声明:VUE配置vue-devtools调试工具及安装方法是由宝哥软件园云端程序自动收集整理而来。如果本文侵犯了你的权益,请联系本站底部QQ或者邮箱删除。 上一篇:使用angularjs.foreach时返回问题的解决 下一篇:对vue v-if v-else-if v-else的简单使用详解 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |