一、下載

Node.js官網(wǎng)下載

大家根據(jù)自己的系統(tǒng)進(jìn)行下載安裝包（我的電腦是windows10-64位，所以下載第一個）

二、安裝

點(diǎn)擊下載的安裝包進(jìn)行安裝

點(diǎn)擊Next

打勾并點(diǎn)擊Next

默認(rèn)安裝路徑是C:\Program Files\nodejs\，我這里選擇在D:\Program Files\nodejs\目錄下安裝,點(diǎn)擊Next

點(diǎn)擊Next

點(diǎn)擊Next

點(diǎn)擊Install

安裝完成點(diǎn)擊Finish

安裝完成后Node.js會自動將node配置到環(huán)境變量中，我們打開Windows的cmd窗口輸入node -v，查看node版本

輸入npm -v，看到npm版本

三、配置

在cmd窗口輸入npm root -g，查看全局安裝的模塊所在目錄

在安裝的目錄下新建兩個文件夾node_cache和node_global

打開cmd命令窗口，配置全局安裝的模塊路徑（注意"D:\Program Files\nodejs\node_global"是我電腦上的安裝路徑，你們以自己電腦實際安裝路徑進(jìn)行替換）

npm config set prefix “D:\Program Files\nodejs\node_global”

配置緩存路徑（注意路徑）

npm config set cache “D:\Program Files\nodejs\node_cache”

在cmd窗口輸入npm root -g，即可看見全局安裝的模塊路徑已經(jīng)切換成我們配置的路徑了

為了之后使用npm下載東西時速度快一些，需要配置鏡像站，這里選擇淘寶鏡像，打開cmd輸入

npm config set registry=http://registry.npm.taobao.org

輸入npm config get registry，輸出http://registry.npm.taobao.org/即表示配置成功

現(xiàn)在配置一下Node.js的環(huán)境變量，設(shè)置環(huán)境變量的目的是在任何目錄都可以執(zhí)行node和vue命令。

windows10可以使用搜索功能搜索環(huán)境變量，點(diǎn)擊編輯系統(tǒng)環(huán)境變量

點(diǎn)擊環(huán)境變量

找到Path，點(diǎn)擊編輯

點(diǎn)擊新建，我電腦的node_global路徑是"D:\Program Files\nodejs\node_global"，配置完成后點(diǎn)擊確定，關(guān)閉環(huán)境變量配置的所有窗口

四、安裝配置vue

輸入npm info vue，查看是否能夠獲取vue信息，這里報下圖的錯誤話需要使用windows PowerShell管理員模式

右鍵左下角的windows圖標(biāo)選擇windows PowerShell（管理員），輸入npm info vue即可

輸入npm install vue -g 開始安裝vue

輸入npm i @vue/cli -g 開始安裝Vue-cli腳手架

五、構(gòu)建運(yùn)行Vue項目

我在D盤創(chuàng)建了一個demo目錄，在命令行使用cd D:\demo進(jìn)入到了demo目錄，準(zhǔn)備構(gòu)建第一個vue項目

輸入vue create first，出現(xiàn)下面的提示，讓選擇創(chuàng)建Vue3還是Vue2的項目，我這里選擇Vue3直接回車

（注意這里可能出現(xiàn)“vue : 無法加載文件 D:\Program Files\nodejs\node_global\vue.ps1，因為在此系統(tǒng)上禁止運(yùn)行腳本。”的問題，解決方案

請參考我的這篇文章:http://www.fzitv.net/javascript/312720jba.htm）

這張圖片是vue項目已經(jīng)構(gòu)建好了

輸入cd first，再輸入npm run serve，即可成功運(yùn)行vue項目

打開瀏覽器輸入http://localhost:8080/即可訪問vue的頁面了

總結(jié) 

到此這篇關(guān)于Node.js和Vue的安裝與配置超詳細(xì)步驟的文章就介紹到這了,更多相關(guān)Node.js和Vue安裝與配置內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論