mac安装vue-devtools

一.先查看电脑是否安装了node

 没有安装node则需要安装node
mac 安装node.js

第一步：官网下载

访问nodejs官网，链接: https://nodejs.org/en/，选择红色选框内的点击安装。
LTS是稳定版。
Current是最新版本，最新的功能特性都在这里面。

 

第二步：安装

点击 在 Finder 中显示，双击刚下载的文件，按步骤默认安装就行。

第三步：验证

 

安装完成后，打开终端，
输入 npm -v 和 node -v两个命令,
如下图出现版本信息，说明安装成功

第四步：环境配置

 以上验证结束后，就可以进行环境配置了
打开Mac 终端，配置全局环境变量
键盘输入【vim .bash_profile】进入编辑状态
打开之后添加一行代码：PATH=$PATH:/usr/local/bin/
点击【esc】退出编辑状态，此时无法对内容进行修改
键盘输入【:wq!】强制保存并退出vim，回到终端的界面
重新打开终端，输入node，就会进入node环境
control+c 按两次退出node环境到此，mac安装node.js就成功了。

原文链接：https://blog.csdn.net/FIY_Lv/article/details/121380788

vue-devtools安装

方法一：（通过谷歌应用商店进行安装，需要番强，国内网打不开）

打开谷歌的更多工具--扩展程序，打开左上角的“主菜单”，点击下面的“打开Chrome网上应用店 ”，https://chrome.google.com/webstore这个应用商店是需要番强的，一般同学是打不开的！

能打开的同学搜索Vue.js devtools，把第一个扩展程序添加至Chrome即可。安装完成以后重新启动浏览器

 

 

安装以后可以运行一个vue项目，右键点击-检查把vue拖出来，拖到左边

若遇到Vue.js not detected这种情况，或者安装以后找不到Vue图标，或者安装以后不能使用点击扩展程序中的管理扩展程序，点击扩展程序的详细信息，会进入到下一个页面，将允许访问文件网址打开即可，然后切换至另一个页面便可看到V标志变亮。表示vue-devtools工具成功安装。具体操作如下图片所示：

 

 点击前往-前往文件夹，把下面路径输入进去，找到插件安装路径

 

/Users/sun/Library/Application Support/Google/Chrome/Default/Extensions

 

 

 

 二,通过文件安装

1、打开https://github.com/vuejs/vue-devtools

1.到github下载vue-devtools 的压缩包

git clone -b add-remote-devtools https://github.com/vuejs/vue-devtools.git
2.在vue-devtools目录下安装依赖包

cd vue-devtools
sudo npm install
然后输入电脑密码(加上sudo为了避免权限问题部分依赖无法安装）

3.修改manifest.json文件

进入vue-devtools-dev文件夹下的shells -> chrome -> manifest.json 
把"persistent":false改成true

 

 

4.编译npm run build

 

5.添加至谷歌浏览器

打开chrome浏览器的扩展程序页面，可通过以下方式进入页面：
        1、谷歌浏览器-->设置-->拓展程序-->打开“开发者模式”

         2、浏览器输入地址： chrome://extensions/-->打开“开发者模式”

添加拓展程序vue-devtools
将chrome文件（vue-devtools -> shells -> chrome）直接拖进去即可。
点击“加载已解压的拓展程序”，选择vue-devtool中的chrome文件夹，成功看见如下界面：

 搞定~~

参考链接如何安装vue-devtools（超简单）_前端吕小布的博客-CSDN博客_devtools怎么安装

vue-devtools安装教程（简单易上手）_小白_xm的博客-CSDN博客_vue-devtools安装

mac安装vue-devtools_小靳小盆友i.的博客-CSDN博客_mac vue-devtools