環(huán)境搭建：首先，看看您的電腦賬戶是否時(shí)管理員賬戶。如果不是，最好請(qǐng)登陸管理員賬戶。

1. 安裝VSCode

官方網(wǎng)站：Visual Studio Code - Code Editing. RedefinedVisual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications.? Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows.https://code.visualstudio.com/

備注：官方網(wǎng)站下載很慢，國(guó)內(nèi)加速鏈接：https://vscode.cdn.azure.cn/stable/b3e4e68a0bc097f0ae7907b217c1119af9e03435/VSCodeSetup-x64-1.78.2.exe

下載完成后，雙擊打開(kāi)?VSCodeUserSetup-x64-1.73.0.exe

?直接 下一步（Next） 安裝完成，不用改任何東西，點(diǎn)擊下一步安裝完成。

2.安裝NodeJs

?官方網(wǎng)站：Node.jsNode.js? is a JavaScript runtime built on Chrome's V8 JavaScript engine.https://nodejs.org/en/

雙擊運(yùn)行??node-v18.12.1-x64.msi? 直接點(diǎn)擊 Next 就行...

記得勾選automatically install the necessary tools（選擇此項(xiàng)后，安裝會(huì)彈出命令提示窗，直接點(diǎn)擊Enter確認(rèn)就行了，等待命令窗口安裝?。?/p>

3.查看是否安裝成功：

? ? ? ? 打開(kāi)cmd命令窗口，輸入

node -v

和

npm -v?

顯示版本，則安裝成功：

????????????

4.修改VsCode為中文版本。

運(yùn)行VScode，打開(kāi)頁(yè)面后，等待幾秒鐘：

目前，VSCode有自動(dòng)檢測(cè)語(yǔ)言環(huán)境，如果出現(xiàn)這個(gè)彈窗，則之間點(diǎn)擊 安裝并重啟 即可切換到中文。?

當(dāng)然，如果沒(méi)有此彈窗，或者未點(diǎn)擊消失了，則執(zhí)行下面步驟修改：

到此界面選擇安裝?

Chinese (Simplified) (簡(jiǎn)體中文) Language Pack for Visual Studio Code

安裝完成后，重啟VSCode即可。

5.安裝VSCode好用的插件（可選）。

1.vetur（vue文件基本語(yǔ)法的高亮插件）

2.eslin（智能錯(cuò)誤檢測(cè)插件）--但是語(yǔ)法檢測(cè)比較嚴(yán)格哦。

3.Auto Close Tag（自動(dòng)閉合HTML/XML標(biāo)簽）

4.Auto Rename Tag（自動(dòng)完成另一側(cè)標(biāo)簽的同步修改）????????

5.JavaScript(ES6) code snippets（ES6語(yǔ)法智能提示以及快速輸入，除js外還支持.ts，.jsx，.tsx，.html，.vue，省去了配置其支持各種包含js代碼文件的時(shí)間）

6.Vue VSCode Snippets（新生成頁(yè)面時(shí)，可快速提供一個(gè)初始化的結(jié)構(gòu)）

附上截圖，其他自己研究：

?6.全局安裝vue-cli腳手架。

win+r? 輸入cmd，打開(kāi)cmd命令窗口，直接輸入：

npm install -g vue-cli

?

安裝webpack，它是打包js的工具：

打開(kāi)cmd命令窗口，直接輸入：

npm install -g webpack 

?安裝完成后，就可以新建項(xiàng)目了。

開(kāi)始創(chuàng)建vue項(xiàng)目，首先創(chuàng)建一個(gè)文件夾用來(lái)存放項(xiàng)目，用vscode打開(kāi)對(duì)應(yīng)的文件夾，并在終端cd到對(duì)應(yīng)的文件夾。比如我的文件夾就是VUE

注意：接下來(lái)的命令需要在cmd命令窗口，vscode默認(rèn)是powershell，需要自己改一下。

點(diǎn)擊 終端--->新建終端：

每個(gè)人的路徑不一樣，先用命令 cd? 到你保存項(xiàng)目的文件夾下面：

比如? 要保存到 ?D:\Tools\code? ?則輸入命令：

?然后是創(chuàng)建項(xiàng)目命令（項(xiàng)目名稱構(gòu)建規(guī)則? 不要用大寫(xiě)，特殊字符，空格等? ? 命令例如：test_txt_code 即可）：

vue create 您的項(xiàng)目名稱

?創(chuàng)建時(shí)，會(huì)讓你選擇 VUE2 版本? 還是 VUE3? 版本，一般選擇VUE3 最新版本（按↑↓選擇）：

?選擇 default? ?VUE3 或者Vue2 ，則會(huì)生成一個(gè)示例工程：

?輸入運(yùn)行命令：先進(jìn)入項(xiàng)目目錄：比如? 要保存到 ?D:\Tools\code\您的項(xiàng)目名稱? 目錄下，然后執(zhí)行命令運(yùn)行（注意cmd是否管理員方式運(yùn)行）

npm run serve

運(yùn)行成功后，在瀏覽器輸入：

http://localhost:8080/

則可以看見(jiàn)頁(yè)面了。

下面說(shuō)說(shuō)自定義選擇：

?按↑↓選擇,按 空格 選擇或取消：

根據(jù)自己需要，選擇相應(yīng)的功能。文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-458167.html

到了這里，關(guān)于2022 VSCode+Vue3安裝詳細(xì)教程的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！