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)境變量中，我們打開Windows的cmd窗口輸入node -v，查看node版本
輸入npm -v，看到npm版本
三、配置
在cmd窗口輸入npm root -g，查看全局安裝的模塊所在目錄
在安裝的目錄下新建兩個(gè)文件夾node_cache和node_global
打開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，即可看見全局安裝的模塊路徑已經(jīng)切換成我們配置的路徑了
為了之后使用npm下載東西時(shí)速度快一些，需要配置鏡像站，這里選擇淘寶鏡像，打開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 開始安裝vue
輸入npm i @vue/cli -g 開始安裝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://m.fzitv.net/javascript/312720jba.htm）
這張圖片是vue項(xiàng)目已經(jīng)構(gòu)建好了
輸入cd first，再輸入npm run serve，即可成功運(yùn)行vue項(xiàng)目
打開瀏覽器輸入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)文章
Node.js如何通過(guò)http調(diào)用外部接口
這篇文章主要介紹了Node.js如何通過(guò)http調(diào)用外部接口問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
node.js連接SQLserver數(shù)據(jù)庫(kù)實(shí)踐
這篇文章主要介紹了node.js連接SQLserver數(shù)據(jù)庫(kù)實(shí)踐方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
VsCode與Node.js知識(shí)點(diǎn)詳解
在本篇文章中小編給大家分享了關(guān)于VsCode與Node.js的相關(guān)知識(shí)點(diǎn)以及安裝等內(nèi)容，需要的朋友們可以參考下。2019-09-09
Express + Session 實(shí)現(xiàn)登錄驗(yàn)證功能
本文主要介紹在 Express 框架中，如何使用 Session 來(lái)實(shí)現(xiàn)用戶登錄身份驗(yàn)證。對(duì)express session實(shí)現(xiàn)登錄驗(yàn)證相關(guān)知識(shí)，感興趣的朋友一起看看吧2017-09-09
Node.js中使用mongoose操作mongodb數(shù)據(jù)庫(kù)的方法
如何利用mongoose將數(shù)據(jù)寫入mongodb數(shù)據(jù)庫(kù)呢？操作方法很簡(jiǎn)單，下面小編給大家分享Node.js中使用mongoose操作mongodb數(shù)據(jù)庫(kù)的方法，感興趣的朋友一起看看吧2017-09-09
windows系統(tǒng)下安裝yarn的詳細(xì)教程
yarn是一個(gè)新的JS包管理工具,它的出現(xiàn)是為了彌補(bǔ)npm的一些缺陷,下面這篇文章主要給大家介紹了關(guān)于windows系統(tǒng)下安裝yarn的詳細(xì)教程,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
Node.js實(shí)戰(zhàn)之Buffer和Stream模塊系統(tǒng)深入剖析詳解
這篇文章主要介紹了Node.js實(shí)戰(zhàn)之Buffer和Stream模塊系統(tǒng)深入剖析詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
本文先介紹原生的node.js實(shí)現(xiàn)命令行交互，了解原生的api,然后通過(guò)commander.js和inquirer.js實(shí)現(xiàn)一個(gè)完整的交互命令行工具。感興趣的朋友跟隨小編一起看看吧2019-05-05
node的好處毋庸置疑，事件驅(qū)動(dòng)，異步非阻塞I/O，以及處理高并發(fā)的能力深入人心，因此大家喜歡用node做一些小型后臺(tái)服務(wù)或者作為中間層和其他服務(wù)配合完成一些大型應(yīng)用場(chǎng)景。2021-06-06
node.js事件循環(huán)機(jī)制及與js區(qū)別詳解
這篇文章主要為大家介紹了node.js事件循環(huán)機(jī)制及與js區(qū)別詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09