win10下vue-devtools的安裝和使用

網上關於vue-devtools的安裝數不勝數，可是本身操做起來卻老是遇到問題。

寫下這篇隨筆，以防之後忘記。

vue-devtools是一款基於chrome遊覽器的插件，用於調試vue應用，這能夠極大地提升咱們的調試效率。固然網上教程確實多，很容易理解，可是新手操做實在會卡住。

這裏介紹一篇，你們能夠去看看https://blog.csdn.net/zhousen...。

我這裏寫下我安裝的全過程，以及走過的彎路，及解決辦法。

方法一：

chrome商店直接安裝
vue-devtools能夠從chrome商店直接下載安裝，很是簡單，這裏就不過多介紹了。不過要注意的一點就是，須要FQ才能下載。

方法二：（主要講方法二）

1、下載chrome擴展插件
GitHub下載地址：

https://github.com/vuejs/vue-...
這個下載的話：

下載zip格式的文件

2、解壓到本地

記得看清楚文件的目錄，等會須要訪問到此目錄，固然你也能夠解壓在c盤，不建議什麼東西都往c盤扔；

3、win+r 輸入 cmd 打開命令行操做
爲了方便新手，cmd也敲出來；

像不少操做都是cnpm install，npm install ，npm run build等操做；等下再介紹，先進入咱們解壓文件的目錄：

進入後輸入 cnpm install；能夠看下，會有錯誤，固然若是你下載了npm，cnpm，天然不會報錯；

以前卡這裏好久，處處找，沒有找到，畢竟新手。

npm：node.js下的包管理，下載node.js 會附帶npm。而後我又跑去找node.jsde的下載方法。介紹你們能夠去看這個

node.js下載博客：

https://www.cnblogs.com/goldl...
node.js的下載網址：

http://nodejs.cn/download/
因爲個人電腦是64位的windows系統；

下載完成後，雙擊安裝

一路next，到了安裝目錄後，默認C盤，（建議改爲D盤，本身新建的目錄）

個人是D盤，nodejs，選好後點擊next。

這裏須要主要，點擊add to path,不須要配置環境，否則又得去操做環境配置，還有這邊下載安裝完成後，不要隨便改變文件夾，否則得從新配置環境變量。。。。。點擊next，install，finish。。。

下載完成後會在你的文件夾有：那個.msi是我以前下的，能夠刪除

如今能夠去操做npm 了，記得從新打開命令行，首先查看環境變量，會發現自動配好了node，和npm，你會發現如今兩個竟然不在同一個文件夾

輸入node -v ，npm -v能夠查看剛纔下載的node，npm的版本；注意不要忘記輸入空格。

如今只是安裝了npm，還有cnpm須要安裝

輸入這個命令： npm install -g cnpm --registry=https://registry.npm.taobao.org

輸入： cnpm -v 檢查版本，

4、cnpm install，npm run build 等操做
如今咱們能夠回到vue-devtool的下載了。。。。。。記得須要進入本身下載解壓文件的位置

雖然我也不知道是在幹啥，可是我知道應該是成功了：

時間有點長，須要耐心等一等。。。。

cnpm install操做完成後進行npm run build

完成後顯示：

而後進去到文件夾內，必定是shells下的chrome的manifest.json文件，

進入本地編輯器，作以下圖修改，false 改爲 true

5、擴展Chrome插件
打開chrome瀏覽器，打開設置>點擊或者程序>點擊開發者模式>加載已解壓的擴展程序