要在VS Code中啟動(dòng)Vue項(xiàng)目，您可以按照以下步驟進(jìn)行操作：

Visual Studio Code(代碼編輯器) v1.83.1 32位 官方中文免費(fèi)綠色版

• 類型：編譯工具
• 大小：120MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2023-10-13

查看詳情

正常情況

打開(kāi)界面后，創(chuàng)建一個(gè)vue文件夾

打開(kāi)終端，輸入npm install vue命令，下載代碼

等待文件下載完成后，找到dist文件夾，雙擊其中的vue.js 文件運(yùn)行即可

新手如何用vsCode運(yùn)行vue項(xiàng)目

安裝Node.js

下載地址：https://nodejs.org/en/，安裝過(guò)程一路next就行

Node.js v20.18.0 官方正式安裝版+綠色解壓版 32位

• 類型：編程控件
• 大?。?/span>48.4MB
• 語(yǔ)言：簡(jiǎn)體中文
• 時(shí)間：2024-10-21

查看詳情

檢查安裝是否成功：

（1）node -v，出現(xiàn)版本號(hào)

（2）node -e “console.log(‘Hello world!’)”

說(shuō)明安裝成功了。

打開(kāi)vsCode左側(cè)欄的擴(kuò)展，搜索并安裝 Vetur

英文不熟練的小伙伴可以在拓展商店搜索chinese安裝中文插件

左上角打開(kāi)要運(yùn)行的項(xiàng)目所在文件夾 在vsCode按住ctrl+`呼出終端，輸入 npm install 回車（正常運(yùn)行直接跳到文章結(jié)尾）

如果結(jié)果出現(xiàn)無(wú)法將“npm”項(xiàng)識(shí)別為 cmdlet、函數(shù)、腳本文件或可運(yùn)行程序的名稱...

這說(shuō)明沒(méi)有設(shè)置環(huán)境變量，這時(shí)候應(yīng)該：

（1）在“我的電腦”右鍵打開(kāi)“屬性”——>高級(jí)系統(tǒng)設(shè)置——>環(huán)境變量

（2）在用戶變量點(diǎn)擊“新建”，變量名輸入NODE_PATH，變量值輸入你node.js安裝的路徑

（3）修改系統(tǒng)變量中的Path，添加 %NODE_PATH%

（4）在node.js的安裝路徑下創(chuàng)建文件夾“node_global”及“node_cache”

（5）在終端運(yùn)行

npm config set prefix “D:\software\nodeJs\node_global”

npm config set cache “D:\software\nodeJs\node_cache”

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

（6）設(shè)置vsCode為管理員身份運(yùn)行

（7）用管理員方式運(yùn)行 powershell

執(zhí)行：get-ExecutionPolicy

執(zhí)行：set-ExecutionPolicy RemoteSigned

輸入Y回車

在vsCode終端重新輸入npm install，可以看到成功了

繼續(xù)輸入npm run dev運(yùn)行項(xiàng)目

成功運(yùn)行的話，恭喜你到這里結(jié)束了！http://localhost:8080就可以打開(kāi)項(xiàng)目了~

以上就是vscode啟動(dòng)vue項(xiàng)目的教程，希望大家喜歡，請(qǐng)繼續(xù)關(guān)注腳本之家。

最新評(píng)論