How to install vue-devtools browser plug-ins to Google

Thanks to the original author: https://www.cnblogs.com/alice-fee/p/8038367.html

 

Setup 1: to be normally open chrome shop, search vuejs devtools installation. chrome: // extensions / developer tools - enabled extensions;

Installation Method 2 (recommended): GitHub download plug-ins, npm package install dependencies, dragged browser extensions

To do:

1.  Download the chrome extension.

On github download and unzip the archive to a local, github Download: https://github.com/vuejs/vue-devtools

2. npm install

After the download is complete, open a command line cmd into the vue-devtools-master folder,

1. npm install, installation dependencies; If the installation is too slow, please refer to the article at the end of the instructions.

2. npm run build

npm run build executed, will shells src file in chrome> js file folder produces several illustrated above;

 

If the implementation of the above command error, can not load background script "build / background.js", as shown below:

3. Open the shells> chrome> manifest.json and put json file in the "persistent": false into true

4.  Extended chrome plugin

1. Open chrome browser, open the More Tools> Extensions;

2. Then click Load unpacked extensions, and then the shells> chrome folder into

 

5, the test installation was successful

在插件的目录下执行npm run dev,这个时候我们的插件就可以运行了,打开localhost:8080可以看到插件已经安装并运行了。

 

 

 

方法3: 下载chrome插件安装包(.crx文件)离线安装(版本较低不推荐)

下载地址:http://www.cnplugins.com/devtool/vuejs-devtools/download.html

安装方法:http://www.cnplugins.com/tools/how-to-setup-crx.html

在chrome中新开一个TAB,输入:chrome://extensions/ 回车,打开应用管理器,可以看到之前安装的其他应用。将下载后的.crx文件,拖入即可安装。

 

 

另附:

1. 建议使用npm淘宝镜像安装依赖包地址:http://npm.taobao.org/

命令行安装npm淘宝镜像:

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

之后我们就可以使用cnpm代替npm安装依赖包了

2. chrome插件网地址 http://www.cnplugins.com/, 有需要别的插件的可类似以上操作。

Guess you like

Origin www.cnblogs.com/adongyo/p/11233762.html