1. 最近在这家公司的安排任务让我去写他们公司的官网，之前写过微信小程序，所以觉得应该不难。所以，搜索相关的资料，发现当前前端比较热门的框架是vue, 并且操作DOM的方式跟微信小程序差不多，所以就选择这个框架，接着使用vue 需要安装这个平台的开发工具调试，本来以为很简单的，结果被坑的不行，经过多个小时的努力搞定，因此，写下这篇文章。

1. vue-devtools是一款基于chrome游览器的插件，用于调试vue应用，这可以极大地提高我们的调试效率。

可以访问外网的朋友，可以直接在chrome商店直接安装
vue-devtools可以从chrome商店直接下载安装，非常简单。

2. 安装vue-devtools 需要先安装npm ，npm 依赖于nodejs.

3. 下载vue-devtools的项目，一开始按照网上的教程，在vue 的github官网上下载，

https://github.com/vuejs/vue-devtools

在这里下载一般都是开发版的，使用npm 编译时，很容易出问题，总是各种报错，对于我这种刚入门的小白来说，排错真的不是一般的难。因此，对于小白，最好使用git 发现版本的。

4. 使用git 下载dev-tools 项目

git clone https://github.com/vuejs/vue-devtools.git
git clone -b v5.1.1 https://github.com/vuejs/vue-devtools.git

5. 使用npm install 下载需要的依赖包

使用npm 需要连接国外网站，很容易下载失败，所以一般使用淘宝镜像

5.1 配置npm使用淘宝镜像

临时使用

npm --registry https://registry.npm.taobao.org install express

永久使用

直接配置

npm config set registry https://registry.npm.taobao.org

通过如下命令可以查看是否配置成功

npm config get registry
npm info express

 如果需要恢复成原来的官方地址，执行如下命令

npm config set registry https://registry.npmjs.org

使用cnpm

安装cnpm，使用时直接将npm替换成cnpm命令

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

安装时使用如下命令

cnpm install express

6. 使用npm install 下载依赖包

7.  使用npm run build 编译

7. 将vue-devtools -> shells ->chrome 文件导入浏览器中

 

 

 

 ok ，安装好在360浏览器就可以使用了。 

 

/**
 * 　　　　　　　　┏┓　　　┏┓+ +
 * 　　　　　　　┏┛┻━━━┛┻┓ + +
 * 　　　　　　　┃　　　　　　　┃
 * 　　　　　　　┃　　　━　　　┃ ++ + + +
 * 　　　　　　 ████━████ ┃+
 * 　　　　　　　┃　　　　　　　┃ +
 * 　　　　　　　┃　　　┻　　　┃
 * 　　　　　　　┃　　　　　　　┃ + +
 * 　　　　　　　┗━┓　　　┏━┛
 * 　　　　　　　　　┃　　　┃
 * 　　　　　　　　　┃　　　┃ + + + +
 * 　　　　　　　　　┃　　　┃　　　　Code is far away from bug with the animal protecting
 * 　　　　　　　　　┃　　　┃ + 　　　　神兽保佑,代码无bug
 * 　　　　　　　　　┃　　　┃
 * 　　　　　　　　　┃　　　┃　　+
 * 　　　　　　　　　┃　 　　┗━━━┓ + +
 * 　　　　　　　　　┃ 　　　　　　　┣┓
 * 　　　　　　　　　┃ 　　　　　　　┏┛
 * 　　　　　　　　　┗┓┓┏━┳┓┏┛ + + + +
 * 　　　　　　　　　　┃┫┫　┃┫┫
 * 　　　　　　　　　　┗┻┛　┗┻┛+ + + +
 *
 * @author chenxi
 * @date 2021年10月21日20:06:11
 */