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

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

• 類型：編譯工具
• 大?。?/span>120MB
• 語言：簡體中文
• 時間：2023-10-13

查看詳情

正常情況

打開界面后，創(chuàng)建一個vue文件夾

打開終端，輸入npm install vue命令，下載代碼

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

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

安裝Node.js

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

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

• 類型：編程控件
• 大小：48.4MB
• 語言：簡體中文
• 時間：2024-10-21

查看詳情

檢查安裝是否成功：

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

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

說明安裝成功了。

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

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

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

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

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

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

（2）在用戶變量點擊“新建”，變量名輸入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)行項目

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

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

最新評論