Node.js和Vue的安裝與配置超詳細(xì)步驟(推薦)
一、下載
大家根據(jù)自己的系統(tǒng)進(jìn)行下載安裝包（我的電腦是windows10-64位，所以下載第一個(gè)）
二、安裝
點(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會(huì)自動(dòng)將node配置到環(huán)境變量中，我們打開(kāi)Windows的cmd窗口輸入node -v，查看node版本
輸入npm -v，看到npm版本
三、配置
在cmd窗口輸入npm root -g，查看全局安裝的模塊所在目錄
在安裝的目錄下新建兩個(gè)文件夾node_cache和node_global
打開(kāi)cmd命令窗口，配置全局安裝的模塊路徑（注意"D:\Program Files\nodejs\node_global"是我電腦上的安裝路徑，你們以自己電腦實(shí)際安裝路徑進(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，即可看見(jiàn)全局安裝的模塊路徑已經(jīng)切換成我們配置的路徑了
為了之后使用npm下載東西時(shí)速度快一些，需要配置鏡像站，這里選擇淘寶鏡像，打開(kāi)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信息，這里報(bào)下圖的錯(cuò)誤話需要使用windows PowerShell管理員模式
右鍵左下角的windows圖標(biāo)選擇windows PowerShell（管理員），輸入npm info vue即可
輸入npm install vue -g 開(kāi)始安裝vue
輸入npm i @vue/cli -g 開(kāi)始安裝Vue-cli腳手架
五、構(gòu)建運(yùn)行Vue項(xiàng)目
我在D盤創(chuàng)建了一個(gè)demo目錄，在命令行使用cd D:\demo進(jìn)入到了demo目錄，準(zhǔn)備構(gòu)建第一個(gè)vue項(xiàng)目
輸入vue create first，出現(xiàn)下面的提示，讓選擇創(chuàng)建Vue3還是Vue2的項(xiàng)目，我這里選擇Vue3直接回車
（注意這里可能出現(xiàn)“vue : 無(wú)法加載文件 D:\Program Files\nodejs\node_global\vue.ps1，因?yàn)樵诖讼到y(tǒng)上禁止運(yùn)行腳本。”的問(wèn)題，解決方案
請(qǐng)參考我的這篇文章:http://www.dbjr.com.cn/javascript/312720jba.htm）
這張圖片是vue項(xiàng)目已經(jīng)構(gòu)建好了
輸入cd first，再輸入npm run serve，即可成功運(yùn)行vue項(xiàng)目
打開(kāi)瀏覽器輸入http://localhost:8080/即可訪問(wèn)vue的頁(yè)面了
總結(jié)
到此這篇關(guān)于Node.js和Vue的安裝與配置超詳細(xì)步驟的文章就介紹到這了,更多相關(guān)Node.js和Vue安裝與配置內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
net和http模塊都是node核心模塊之一，他們都可以搭建自己的服務(wù)端和客戶端，以響應(yīng)請(qǐng)求和發(fā)送請(qǐng)求。這篇文章主要介紹了Nodejs核心模塊之net和http的使用詳解，感興趣的小伙伴們可以參考一下2019-04-04
這篇文章主要介紹了關(guān)于javascript中變量及函數(shù)的提升，下面和小編來(lái)一起學(xué)習(xí)吧2019-05-05
Node中的事件模型就是我們常見(jiàn)的訂閱發(fā)布模式,Nodejs核心API都采用異步事件驅(qū)動(dòng),所有可能觸發(fā)事件的對(duì)象都是一個(gè)繼承自EventEmitter類的子類實(shí)例對(duì)象,這篇文章主要給大家介紹了關(guān)于Node.JS事件的綁定與觸發(fā)事件的相關(guān)資料,需要的朋友可以參考下2022-11-11
深入理解Node.js 事件循環(huán)和回調(diào)函數(shù)
這篇文章主要介紹了深入理解Node.js 事件循環(huán)和回調(diào)函數(shù)，詳細(xì)的介紹Node.js 事件循環(huán)和Node.js回調(diào)函數(shù)，需要學(xué)習(xí)的可以參考一下。2016-11-11
node.JS的crypto加密模塊使用方法詳解(MD5,AES,Hmac,Diffie-Hellman加密)
本文將詳細(xì)介紹node.JS的加密模塊crypto實(shí)現(xiàn)MD5,AES,Hmac,Diffie-Hellman加密的詳解方法,需要的朋友可以參考下2020-02-02
Node.js版本升級(jí)如何修改模塊默認(rèn)的保存位置
這篇文章主要給大家介紹了關(guān)于Node.js版本升級(jí)如何修改模塊默認(rèn)的保存位置,文中通過(guò)代碼以及圖文介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用node.js具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2024-05-05
windows系統(tǒng)下安裝npm(Node.js)方法教程
在Windows環(huán)境下進(jìn)行Node.js的安裝并不是一件復(fù)雜的事情,但是在安裝過(guò)程中需要注意一些細(xì)節(jié),下面這篇文章主要給大家介紹了關(guān)于windows系統(tǒng)下安裝npm(Node.js)的相關(guān)資料,需要的朋友可以參考下2023-12-12
Node.js中的HTTP?Server對(duì)象與GET、POST請(qǐng)求
這篇文章介紹了Node.js中的HTTP?Server對(duì)象與GET、POST請(qǐng)求，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-07-07
node.js+captchapng+jsonwebtoken實(shí)現(xiàn)登錄驗(yàn)證示例
本篇文章主要介紹了node.js+captchapng+jsonwebtoken實(shí)現(xiàn)登錄驗(yàn)證示例，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
YApi 是一個(gè)可本地部署的、打通前后端及QA的、可視化的接口管理平臺(tái),下面這篇文章主要給大家介紹了關(guān)于Yapi安裝部署的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09