一、安裝Node.js（js的執行環境）

1.在Node.js官網https://nodejs.org/en/download/ 下載安裝包。
2.下載後進行安裝。
3.開啟命令列，輸入node -v可以檢視到版本號。輸入npm –v可看到npm版本號。
新版的Node.js已自帶npm（類似.net中的nuget包管理器），安裝Node.js時會一起安裝。（將來要更新npm可用這個命令npm intall npm@latest -g）

4.在我的win10系統中可以看到環境變數也已經自動配置好了。如下圖

同時也可年看到npm包管理器的預設下載目錄，如下圖

5.在命令列輸入node回車，再輸入console.log(“hello”); 注意以英文分號結束，檢視到輸出結果就說明安裝成功了。

6配置npm的全域性模組的存放路徑以及快取的路徑
(先要退出上一步已進入的node，輸入.exit或者按兩次Ctrl+C就退出了node)
在node.js的安裝目錄（C:\Program Files\nodejs）下新建兩個資料夾node_cache和node_global方便集中管理。(因為預設會將模組安裝到【C:\Users\使用者名稱\AppData\Roaming\npm】路徑中，佔C盤空間，所以下面兩行的命令是修改模組儲存的路徑，自已想放哪都行，這裡我就懶得放其它盤了)
然後在命令列輸入

npm config set prefix "c:\Program Files\nodejs\node_global"
npm config set cache "c:\Program Files\nodejs\node_cache"

將來用npm install XXX -g安裝以後模組就在這兩個資料夾裡。

然後在C:\Users\[你的使用者名稱]下用記事本開啟.npmrc檔案確定如下圖所示就說明設定成功了。

7.配置npm的環境變數（因為上面修改了路徑）

在系統變path中新增一個變數C:\Program Files\nodejs\node_global\node_modules

然後在使用者變數中修改變數為C:\Program Files\nodejs\node_global

最後就可以刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。（這裡得顯示隱藏的專案才能看到AppData目錄）

（注意：修改了環境變數後要重新開啟命令列介面）
8..測式npm
安裝個module測試下，例如最常用的express模組。
輸入命令npm install express –g
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下就可看到express資料夾和它的檔案了。

二、安裝cnpm（淘寶的npm）

因為npm安裝外掛是從國外伺服器下載，受網路影響大，可能出現異常。
1.下載安裝cnpm並且使用淘寶的伺服器做為的包源 。
輸入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org注意registry前面是兩個槓啊。
完成後輸入cnpm –v可檢視到相關資訊。

完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到cnpm資料夾和它的檔案了。如下圖

還有在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd兩個檔案。

三、安裝webpack（js應用程式的靜態模組打包器(module bundler)）

當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖(dependency graph)，其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。
Vue的元件是.vue或.wxml等檔案，無法被瀏覽器解析，需要被翻譯和打包為.js檔案
1.輸入cnpm install webpack –g安裝 。
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到webpack資料夾和它的檔案了,還有在C:\Program Files\nodejs\node_global可看到webpack和webpack.cmd兩個檔案。

四、安裝vue-cli（用來生成vue模版的工具）

vue-cli這個構建工具大大降低了webpack的使用難度，支援熱更新，有webpack-dev-server的支援，相當於啟動了一個請求伺服器。
vue-cli是腳手架，就是用配置好的模版快速搭起一個專案來，省去配置webpack的基本內容。通過vue init 模版名 專案名，然後再有幾個簡單設定就建起專案了。
1.輸入cnpm install vue-cli –g安裝，
完成後在C:\Program Files\nodejs\node_global\node_modules目錄下可看到vue-cli資料夾和它的檔案了,還有在C:\Program Files\nodejs\node_global可看到vue的六個檔案。

如下圖

五、新建一個Vue專案測式一下

為了訪止出現什麼問題，我關閉命令列介面後重新開啟命令列介面。
1.我在D盤新建一個名為VueProjects的資料夾來專門存放vue專案。
2.在命行先輸入d: 進入D盤，再輸入cd d:\VueProjects進入到此目錄。
3.輸入vue init webpack test1新建一個專案，

在新建過程中會要輸入幾次回車和y，如下圖（記得最後一步選擇No I will handle that myselft，也就是建立完專案後由我自己來下載依賴）

完成後會建立專案，如下圖

然後輸入cd test1進入專案目錄，

輸入cnpm install下載安裝專案的依賴(注意不是用的npm，而是cnpm，這樣快些)，完成後可在目錄中看到所有有依賴，如下圖

輸入cnpm run dev(注意不是用的npm，而是cnpm)後會給出提示讓我們在瀏覽器通過http://localhost:8080地址訪問。

六、安裝VSCode（ 官網https://code.visualstudio.com/Download）

安裝過程就不寫了，下一步下一步就完成了。
1.安裝vetur外掛，是vue語法的高亮外掛。
2.安裝eslint外掛，是智慧錯誤檢測外掛。

這兩年外掛安裝，先要開啟：檔案-〉首選項-〉設定，在使用者設定中輸入如下程式碼

"emmet.syntaxProfiles": {
 "vue-html": "html","vue": "html"
 }
 
"eslint.validate": [
 "javascript","javascriptreact","html","vue"
],"eslint.options": {
 "plugins": ["html"]
}

也可以通過左邊的擴充套件，然後搜尋相應外掛安裝。

3.安裝prettier外掛，是程式碼格式化工具

裝完後重啟VSCode，然開啟設定，搜尋eslint，接首在右側使用者配置新增相關配置

具體相關配置程式碼如下：

"editor.detectIndentation": false,"editor.tabSize": 2,"prettier.tabWidth": 2,"prettier.eslintIntegration": true,//讓prettier使用eslint的程式碼格式進行校驗
 "prettier.semi": false,//去掉程式碼結尾的分號
 "prettier.singleQuote": true,//使用帶引號替代雙引號
 "javascript.format.insertSpaceBeforeFunctionParenthesis": true,//讓函式(名)和後面的括號之間加個空格
 "vetur.format.defaultFormatter.html": "js-beautify-html",//格式化.vue中html
 "vetur.format.defaultFormatter.js": "vscode-typescript",//讓vue中的js按編輯器自帶的ts格式進行格式化

4.開啟專案test1

5.執行專案

在終端輸入cnpm install先檢查和下載依賴，然後輸入cnpm run dev執行專案，如下圖

最後給出提示，開啟瀏覽器輸入http://localhost:8080這個地址就可訪問了。

七、VS2017中使用npm

1.新建一個asp.net core空白專案。

2.設定nodejs程式所在目錄（注意排在.\node_modules\.bin下面）

3.開啟cmd或者powershell，切換到asp.net core專案目錄下。

4.輸入要安裝的js包，例如我這裡要下載安裝oidc-client ： cnpm install oidc-client

5.然後在vs2017中就可以看到了

總結

到此這篇關於Vue環境搭建+VSCode+Win10的文章就介紹到這了,更多相關Vue環境搭建+VSCode+Win10內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！