Vue環境搭建+VSCode+Win10的詳細教程

一、安裝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內容請搜索億速云以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持億速云！