@[TOC]Vue工具篇-1、关于Windows环境下安装vue.js Vue-Devtools过程

一、安装Node.js和yarn

1、进入Node.js官网https://nodejs.org/en/download/,选择版本下载
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
2、然后一路一直点击安装即可,安装路径可以自定义选择
3、安装完成后,打开cmd,输入命令 node --version 出现如下页面即安装成功
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
--------------------------------- 我是一条分割线。。。。------------------------------

4、打开cmd,输入npm install -g yarn安装yarn
5、安装完成后,查看yarn版本号 yarn --version
Vue工具篇-1、关于安装vue.js Vue-Devtools过程

二、安装Vue-Devtools

1、进入Vue官网https://cn.vuejs.org/,在生态系统下点击Devtools
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
2、页面跳转到GitHub,点击下载zip包
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
3、下载完毕后解压到文件夹,我这里是解压到自己创建的文件夹

Vue工具篇-1、关于安装vue.js Vue-Devtools过程
4、然后进入到Vue-devtools-dev目录下,按住shift键,右键打开powershell窗口
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
5、输入yarn install,开始安装,我这里已经安装过了,就不贴图了
6、再接下来输入yarn run build,等待安装后,出现如下页面即安装成功
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
7、打开文件夹,进入到\vue-devtools-dev\packages\shell-chrome目录下,打开manifest.json文件,修改
“persistent”: false 为 “persistent”: trueVue工具篇-1、关于安装vue.js Vue-Devtools过程
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
8、打开Google Chrome,进入扩展程序,打开开发者模式,点击加载已解压的扩展程序,选择\vue-devtools-dev\packages\目录下的shell-chrome文件夹
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
Vue工具篇-1、关于安装vue.js Vue-Devtools过程
9、安装完成
Vue工具篇-1、关于安装vue.js Vue-Devtools过程

三、使用 Vue-devtools调试

1、在浏览器打开调试项目,我这里随便写了个测试页面,打开控制台,点击图中的Vue,即可进行调试
Vue工具篇-1、关于安装vue.js Vue-Devtools过程

相关文章:

  • 2021-05-27
  • 2021-05-01
  • 2021-06-14
  • 2021-04-28
  • 2021-10-09
  • 2021-07-08
猜你喜欢
  • 2021-06-14
  • 2021-07-02
  • 2021-04-05
  • 2021-10-24
  • 2021-10-20
  • 2021-11-27
  • 2021-04-03
相关资源
相似解决方案