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

1.在Node.js官網(wǎng)https://nodejs.org/en/download/ 下載安裝包。
2.下載后進(jìn)行安裝。
3.打開命令行，輸入node -v可以查看到版本號。輸入npm –v可看到npm版本號。
新版的Node.js已自帶npm（類似.net中的nuget包管理器），安裝Node.js時(shí)會一起安裝。（將來要更新npm可用這個(gè)命令npm intall npm@latest -g）

4.在我的win10系統(tǒng)中可以看到環(huán)境變量也已經(jīng)自動(dòng)配置好了。如下圖

同時(shí)也可年看到npm包管理器的默認(rèn)下載目錄，如下圖

5.在命令行輸入node回車，再輸入console.log(“hello”); 注意以英文分號結(jié)束，查看到輸出結(jié)果就說明安裝成功了。
6配置npm的全局模塊的存放路徑以及緩存的路徑
(先要退出上一步已進(jìn)入的node，輸入.exit或者按兩次Ctrl+C就退出了node)
在node.js的安裝目錄（C:\Program Files\nodejs）下新建兩個(gè)文件夾node_cache和node_global方便集中管理。(因?yàn)槟J(rèn)會將模塊安裝到【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安裝以后模塊就在這兩個(gè)文件夾里。

然后在C:\Users\[你的用戶名]下用記事本打開.npmrc文件確定如下圖所示就說明設(shè)置成功了。

7.配置npm的環(huán)境變量（因?yàn)樯厦嫘薷牧寺窂剑?/p>

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

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

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

二、安裝cnpm（淘寶的npm）

因?yàn)閚pm安裝插件是從國外服務(wù)器下載，受網(wǎng)絡(luò)影響大，可能出現(xiàn)異常。
1.下載安裝cnpm并且使用淘寶的服務(wù)器做為的包源 。
輸入命令：npm install –g cnpm --registry=https://registry.npm.taobao.org注意registry前面是兩個(gè)杠啊。
完成后輸入cnpm –v可查看到相關(guān)信息。

完成后在C:\Program Files\nodejs\node_global\node_modules目錄下可看到cnpm文件夾和它的文件了。如下圖

還有在C:\Program Files\nodejs\node_global可看到cnpm和cnpm.cmd兩個(gè)文件。

三、安裝webpack（js應(yīng)用程序的靜態(tài)模塊打包器(module bundler)）

當(dāng) webpack 處理應(yīng)用程序時(shí)，它會遞歸地構(gòu)建一個(gè)依賴關(guān)系圖(dependency graph)，其中包含應(yīng)用程序需要的每個(gè)模塊，然后將所有這些模塊打包成一個(gè)或多個(gè) 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兩個(gè)文件。

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

vue-cli這個(gè)構(gòu)建工具大大降低了webpack的使用難度，支持熱更新，有webpack-dev-server的支持，相當(dāng)于啟動(dòng)了一個(gè)請求服務(wù)器。
vue-cli是腳手架，就是用配置好的模版快速搭起一個(gè)項(xiàng)目來，省去配置webpack的基本內(nèi)容。通過vue init 模版名 項(xiàng)目名，然后再有幾個(gè)簡單設(shè)置就建起項(xiàng)目了。
1.輸入cnpm install vue-cli –g安裝，
完成后在C:\Program Files\nodejs\node_global\node_modules目錄下可看到vue-cli文件夾和它的文件了,還有在C:\Program Files\nodejs\node_global可看到vue的六個(gè)文件。

如下圖

五、新建一個(gè)Vue項(xiàng)目測式一下

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

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

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

然后輸入cd test1進(jìn)入項(xiàng)目目錄，

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

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

六、安裝VSCode（ 官網(wǎng)https://code.visualstudio.com/Download）

安裝過程就不寫了，下一步下一步就完成了。
1.安裝vetur插件，是vue語法的高亮插件。
2.安裝eslint插件，是智能錯(cuò)誤檢測插件。

這兩年插件安裝，先要打開：文件-〉首選項(xiàng)-〉設(shè)置，在用戶設(shè)置中輸入如下代碼

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

也可以通過左邊的擴(kuò)展，然后搜索相應(yīng)插件安裝。

3.安裝prettier插件，是代碼格式化工具

裝完后重啟VSCode，然打開設(shè)置，搜索eslint，接首在右側(cè)用戶配置添加相關(guān)配置

具體相關(guān)配置代碼如下：

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

4.打開項(xiàng)目test1

5.運(yùn)行項(xiàng)目

在終端輸入cnpm install先檢查和下載依賴，然后輸入cnpm run dev運(yùn)行項(xiàng)目，如下圖

最后給出提示，打開瀏覽器輸入http://localhost:8080這個(gè)地址就可訪問了。

七、VS2017中使用npm

1.新建一個(gè)asp.net core空白項(xiàng)目。

2.設(shè)置nodejs程序所在目錄（注意排在.\node_modules\.bin下面）

3.打開cmd 或者powershell，切換到asp.net core項(xiàng)目目錄下。

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

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

總結(jié)

到此這篇關(guān)于Vue環(huán)境搭建+VSCode+Win10的文章就介紹到這了,更多相關(guān)Vue環(huán)境搭建+VSCode+Win10內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論