一、安裝node.js
1、下載
（1）官方Node.js 安裝包及源碼下載地址為：https://nodejs.org/en/download/
（2）百度雲資源
鏈接：https://pan.baidu.com/s/1Y3Y-tECz-KJ3vfo5mV04Cg
提取碼：lpoi
2、安裝
傻瓜式操作，選擇安裝目錄一直下一步即可，安裝目錄結果如下：
3、打開命令行，檢查是否正常
二、安裝cnpm
用npm安裝依賴環境的時候，實在太慢了，我們通常會選擇使用cnpm，但是當我們使用cnpm命令的時候，通常會出現“cnpm' 不是內部或外部命令,也不是可運行的程序”的提示。可以按照以下步驟處理
1、在進入創建的文件夾后，利用淘寶npm鏡像安裝相關依賴，命令如下：
npm install -g cnpm --registry=https://registry.npm.taobao.org
2、在cmd中輸入cnpm -v就可以看是否安裝成功。
3、使用cnpm
比如安裝echarts ，命令：cnpm install echarts
安裝完畢之后，可以查看安裝的依賴結果
4、直接將npm的路徑改為淘寶鏡像（二中已經提到）
由於項目要求，有時候直接將路徑改為淘寶鏡像，命令如下：
npm config set registry https://registry.npm.taobao.org
可通過下面命令行查看是否替換成功
npm config get registry
三、設置npm的全局目錄信息
npm是隨同NodeJS一起安裝的包管理工具，能解決NodeJS代碼部署上的很多問題。比如常用的有：
1）允許用戶從NPM服務器下載別人編寫的第三方包到本地使用。
2）允許用戶從NPM服務器下載並安裝別人編寫的命令行程序到本地使用。
3）允許用戶將自己編寫的包或命令行程序上傳到NPM服務器供別人使用
1、首先按照上面的步驟方法安裝node.js，安裝完畢之后可以用 npm -v 查看npm的版本
2、再查看另外2個目錄，npm的本地倉庫跑在系統盤c盤的用戶目錄了(沒見到npm-cache是因為沒有用過，一使用緩存目錄就生成了)，我們試圖把這2個目錄移動回到E:\Java\setting\nodejs
先如下圖建立2個目錄
然后運行以下兩條命令改變npm的本地倉庫，並且使用命令npm list -global查看npm的本地倉庫
npm config set prefix "E:\Java\setting\nodejs\node_global"
npm config set cache "E:\Java\setting\nodejs\node_cache"
3、配置鏡像站
輸入以下命令 配置淘寶鏡像站
npm config set registry=http://registry.npm.taobao.org
輸入以下命令顯示所有配置信息
npm config list
我們關注一個配置文件，可以看到剛才的配置信息
可以使用命令 npm config get registry 檢查一下剛才配置的鏡像站行不行
測試能否獲取Vue的信息
npm info vue
注意：
（1）此時，默認的模塊E:\Java\setting\nodejs\node_modules 目錄將會改變為E:\Java\setting\nodejs\node_global\node_modules 目錄。
（2）如果直接運行npm install等命令會報錯的。
我們需要做一件事，增加環境變量NODE_PATH，內容是：E:\Java\setting\nodejs\node_global\node_modules
重新打開cmd窗口讓上面的環境變量生效
注意：這里還有一種可能會出現上述操作錯誤，解決方法是：在命令行切換到安裝nodejs文件下的nodejs\node_modules\npm 后執行npm install express
四、測試npm安裝vue.js
命令
npm install vue -g
這里的-g是指安裝到global全局目錄去
五、測試npm安裝vue-router
命令
npm install vue-router -g
六、測試npm安裝vue腳手架
命令
npm install vue-cli -g
輸入vue命令測試
解決方法：對環境變量新增 E:\Java\setting\nodejs\node_global，win10以下版本的，橫向顯示PATH的，注意添加到最后時，不要有分號【;】
保存環境變量后，重新關閉打開CMD，並且測試VUE是否使用正常
注：vue-cli工具是內置了模板包括 webpack 和 webpack-simple,前者是比較復雜專業的項目，他的配置並不全放在根目錄下的 webpack.config.js 中
七、安裝webpack
webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關系圖(dependency graph)，其中包含應用程序需要的每個模塊，然后將所有這些模塊打包成一個或多個 bundle。
安裝webpack之前請按照上述步驟先安裝node.js以及npm或者cnpm
1、全局安裝webpack
運行CMD，安裝命令如下所示，其中， -g是全局安裝，並移除安裝了 webpack和webpack-cli
npm install webpack webpack-cli –g
2、創建本地項目文件夾
創建項目本地文件夾，如“E:\Java\setting\webpack”，在CMD命令窗中分別輸入如下命令，切換到該目錄
3、本地安裝webpack
輸入如下命令，在項目目錄中安裝webpack，其中，--save-dev是本地安裝
npm install webpack webpack-cli --save-dev
4、查看webpack版本
輸入如下命令，若出現版本號，說明安裝成功
webpack -v
5、創建package.json文件
輸入如下命令，將在項目目錄中自動生成package.json文件
npm init -y
6、配置打包目錄
在項目目錄下，新建config文件夾，用於存放配置文件；src文件夾，用於存放源碼；out文件夾，用於存放打包生成文件，具體如下圖所示。
7、添加webpack.config.js文件
在config文件夾中添加webpack.config.js文件，並添加如下代碼：
const path=require('path'); //調用node.js中的路徑 module.exports={ entry:{ index:'./src/js/index.js' //需要打包的文件 }, output:{ filename:'[name].js', //輸入的文件名是什么，生成的文件名也是什么 path:path.resolve(__dirname,'../out') //指定生成的文件目錄 }, mode:"development" //開發模式，沒有對js等文件壓縮，默認生成的是壓縮文件 }
8、運行webpack
在cmd命令窗體中，輸入如下命令，運行成功后，在out目錄中會生成打包后的index.js
webpack --config config/webpack.config.js
恭喜自己了，報錯了，提示里面找不到./src/js/index.js。我們回過頭來看一下配置文件和對應的目錄
配置文件里面顯示需要打包的文件名稱和路徑是./src/js/index.js ，我們在看一下src目錄下是否存在該文件
果不其然，缺少對應的文件信息，我們在src目錄下新建js目錄，放入一個空的index.js文件
再次執行命令 webpack --config config/webpack.config.js
執行完畢之后，我們可以發現制定生成的文件空目錄out下面出現了index.js，至此成功打包完畢
9、配置package.json
每次輸入命令webpack --config config/webpack.config.js，太長，且非常不方便，此時我們可以在package.json文件中配置，新加一行配置信息：
"start": "webpack --config config/webpack.config.js"
如下所示
配置完成后，我們輸入的如下命令，可以直接打包。
npm run start
10、js緩存處理
通過哈希值解決JS緩存問題(在沒有修改JS要打包的內容時，不會重新打包一個JS文件)，修改webpack.config.js文件，具體代碼如下：
const path=require('path');
module.exports={
entry:{
index:'./src/js/index.js'
},
output:{
filename:'[name].[chunkhash:8].js',//增加8位的哈希值
path:path.resolve(__dirname,'../out')
},
mode:"development",
}
11、安裝webpack插件clean-webpack-plugin
通過clean-webpack-plugin插件刪除輸出目中之前舊的文件。
安裝命令
npm install --save-dev clean-webpack-plugin
用法一
const path=require('path'); const {CleanWebpackPlugin} = require('clean-webpack-plugin'); module.exports={ entry:{ index:'./src/js/index.js' }, output:{ filename:'[name].[chunkhash:8].js', path:path.resolve(__dirname,'../out') }, mode:"development", plugins:[ new CleanWebpackPlugin() ] }
用法二
const path=require('path');
const CleanWebpackPlugin = require('clean-webpack-plugin').CleanWebpackPlugin ;
module.exports={
entry:{
index:'./src/js/index.js'
},
output:{
filename:'[name].[chunkhash:8].js',
path:path.resolve(__dirname,'../out')
},
mode:"development",
plugins:[
new CleanWebpackPlugin()
]
}
配置完后，我們再次運行npm run start，此時out目錄中，只有一個新生成的js文件，如下圖所示。
運行前的文件
運行后的文件
至此，我們完成從webpack安裝、配置、打包等一系列步驟
四、安裝vue-devtools
vue-devtools是一款基於chrome瀏覽器的插件
注意注意！！！！！
===================我是分割線（以下步驟乃是錯誤教程，是本人踩坑過程，請勿模仿）========================
1、在github上找到vue-devtools的項目，將其clone到本地。
git clone https://github.com/vuejs/vue-devtools.git
2、在vue-devtools目錄下安裝依賴包
cd E:\Java\setting\vue-devtools\vue-devtools
cnpm install
3、修改manifest.json文件
把"persistent":false改成true
4、編譯代碼
npm run build
本人操作時顯示沒有安裝webpack，如果你也遇到，就按照上述webpack安裝步驟解決吧
安裝完成之后運行該命令
恭喜我吧，我又掉坑了，百度了一下原來是版本號的原因。換版本重新安裝
===================我是分割線（以上步驟乃是錯誤教程，是本人踩坑過程，請勿模仿）我們重新開始吧========================
1、失敗原因
網上的大部分教程都是在shells>chrome>manifest，可是可是我安裝的最新版本是下圖這樣的
經過查找發現出現這樣的Error: Cannot find module ‘@vue-devtools/build-tools’ npm ERR! vue-devtools@5.3.2 build: `cd packages/shell-chrome && cross-env NODE_ENV=production webpa錯誤（我只粘貼了一部分）
##其實直接換成下圖的版本就可以了，那些新版本我安裝都有問題
具體版本的網址在下面
https://github.com/vuejs/vue-devtools/tree/v5.1.1
百度雲：
鏈接：https://pan.baidu.com/s/1eD0FgfKU43_BiYqG11D2Xg
提取碼：f1v5
看到了吧，manifest.json的目錄位置和之前踩坑最新版本不一樣了
2、安裝這個版本再執行下面的命令就可以了
npm i或npm install
3、修改manifest.json文件
false改成true即可
4、執行編譯命令
npm run build
終於成功了，差點要被自己感動哭了，好了，繼續下面的步驟吧
5、擴展Chrome插件
Chrome瀏覽器 > 更多程序 > 拓展程序
記得打開開發者模式，
點擊加載已解壓程序按鈕, 選擇 vue-devtools > shells > chrome 放入, 安裝成功如下圖
6、vue-devtools使用
vue項目, 打開f12, 選擇vue就可以使用了.
vue是數據驅動的, 這樣就能看到對應數據了, 方便我們進行調試
怎么樣, 是不是感覺工作效率提高了呢