Vue環(huán)境搭建+VSCode+Win10的詳細教程

一、安裝Node.js（js的運行環(huán)境）

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系統(tǒng)中可以看到環(huán)境變量也已經自動配置好了。如下圖

同時也可年看到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的環(huán)境變量（因為上面修改了路徑）

在系統(tǒng)變path中新增一個變量C:\Program Files\nodejs\node_global\node_modules

然后在用戶變量中修改變量為C:\Program Files\nodejs\node_global

最后就可以刪掉C:\Users\xlz\AppData\Roaming下的npm目錄了。（這里得顯示隱藏的項目才能看到AppData目錄）
（注意：修改了環(huán)境變量后要重新打開命令行界面）
8..測式npm
安裝個module測試下，例如最常用的express模塊。
輸入命令npm install express –g
完成后在C:\Program Files\nodejs\node_global\node_modules目錄下就可看到express文件夾和它的文件了。

二、安裝cnpm（淘寶的npm）

因為npm安裝插件是從國外服務器下載，受網絡影響大，可能出現(xiàn)異常。
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應用程序的靜態(tài)模塊打包器(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項目測式一下

為了訪止出現(xiàn)什么問題，我關閉命令行界面后重新打開命令行界面。
1.我在D盤新建一個名為VueProjects的文件夾來專門存放vue項目。
2.在命行先輸入d: 進入D盤，再輸入cd d:\VueProjects進入到此目錄。
3.輸入vue init webpack test1新建一個項目，

在新建過程中會要輸入幾次回車和y，如下圖（記得最后一步選擇No I will handle that myselft，也就是創(chuàng)建完項目后由我自己來下載依賴）

完成后會創(chuàng)建項目，如下圖

然后輸入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, //讓函數(shù)(名)和后面的括號之間加個空格
 "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環(huán)境搭建+VSCode+Win10的文章就介紹到這了,更多相關Vue環(huán)境搭建+VSCode+Win10內容請搜索億速云以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持億速云！