安裝前準(zhǔn)備工作

必須安裝有node

可以在命令提示符工具使用node -v和npm -v來(lái)確定是否安裝成功

node -v

npm -v

如出現(xiàn)下圖則表示安裝成功

重點(diǎn) 打開node安裝目錄在安裝目錄下新建兩個(gè)文件夾node_global和node_cache

Ⅲ 用管理員權(quán)限打開cmd命令窗口，輸入

npm config set prefix “你的路徑\node_global”

{這里你的路徑是指你的node安裝路徑}

Ⅳ 輸入

npm config set cache “你的路徑\node_cache”

 {這里你的路徑是指你的node安裝路徑}

Ⅴ 設(shè)置環(huán)境變量 配置開發(fā)框架

①打開【系統(tǒng)屬性】-【高級(jí)】-【環(huán)境變量】，點(diǎn)擊系統(tǒng)變量中的新建變量名：NODE_PATH

變量值為：你的路徑\node_global\node_modules 或者 你的路徑  \node_modules

{這里你的路徑是指你的node路徑}

②編輯用戶變量（環(huán)境變量進(jìn)去上面那一欄）然后雙擊path 將默認(rèn)的 C 盤下 APPData\Roaming\npm 修改成 你的路徑\node_global 如果沒(méi)有APPData\Roaming\npm 直接新建 你的路徑\node_global 

{這里你的路徑是指你的node路徑}

③在用戶變量Path里面添加%NODE_PATH%

然后把默認(rèn)源設(shè)置為淘寶鏡像，設(shè)置方法：

管理員打開cmd輸入npm config set registry https://registry.npm.taobao.org 改變默認(rèn)源

然后管理員權(quán)限打開cmd 運(yùn)行

npm install -g @vue/cli

等出現(xiàn)類似于上圖則表示vue腳手架安裝成功

④ 管理員打開Windows PowerShell 運(yùn)行Set-ExecutionPolicy Unrestricted -scop Localmachine 然后選擇A(全是) 來(lái)是設(shè)置vue腳本權(quán)限

再設(shè)置環(huán)境變量

⑤ 在系統(tǒng)變量→Path里面添加C:\Program Files\nodejs\node_cache 根據(jù)你的路徑而定

Ⅵ 創(chuàng)建vue項(xiàng)目

① 以管理員身份打開vscode  在你的項(xiàng)目下新建一個(gè)存放vue框架的文件夾我這里起名是vue你可以參考

然后代開它的終端輸入cd vue(你新建的vue框架文件夾名稱) 進(jìn)入該文件夾

 然后創(chuàng)建vue項(xiàng)目

vue create 你要?jiǎng)?chuàng)建的vue項(xiàng)目名

然后回車 等一會(huì)然后選擇vue3或者vue2 現(xiàn)在大多數(shù)都是3

 然后在選擇npm (有則選沒(méi)有則默認(rèn))

然后等待項(xiàng)目創(chuàng)建成功如下圖 創(chuàng)建成功后vue里面會(huì)有很多東西哦 然后vscode會(huì)將怎樣啟動(dòng)vue的代碼給你 

cd wkx //表示要進(jìn)入你的vue項(xiàng)目下
npm run serve //表示啟動(dòng)該vue框架

npm run serve之后會(huì)啟動(dòng)vue服務(wù) 如果系統(tǒng)提示您什么請(qǐng)選是或者允許

然后你會(huì)得到vue的本機(jī)訪問(wèn)地址和網(wǎng)絡(luò)訪問(wèn)地址 這里我們使用本機(jī)訪問(wèn)

復(fù)制粘貼在瀏覽器中 vue就搭建好啦

Ctrl + c 停止vue服務(wù)運(yùn)行

總結(jié)

到此這篇關(guān)于Win11&Win10配置vue開發(fā)環(huán)境的文章就介紹到這了,更多相關(guān)Windows配置vue開發(fā)環(huán)境內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論