VS-Code中Vue3項(xiàng)目創(chuàng)建vite方式
更新時(shí)間：2025年08月26日 11:01:32 作者：玉米蛋撻
用戶詳細(xì)說明了使用Node.js和Vite創(chuàng)建Vue3項(xiàng)目的過程,包括安裝依賴、項(xiàng)目結(jié)構(gòu)解析（如src/main.ts、App.vue、components、assets等）,以及VSCode插件配置建議,強(qiáng)調(diào)核心插件安裝和依賴管理的重要性
準(zhǔn)備
node.js下載才可以使用npm命令 => 腳手架安裝
vite項(xiàng)目創(chuàng)建步驟
讓項(xiàng)目比較好找，所以我就創(chuàng)建在桌面了，右擊桌面=> 選擇在終端打開
輸入命令
npm create vue@latest
有一個(gè)install的話直接y就行，然后根據(jù)自己選擇創(chuàng)建
這樣就是成功了
從桌面vue3項(xiàng)目點(diǎn)進(jìn)去，解釋項(xiàng)目文件
.vscode里面有extension.json里面裝著插件，推薦Vue - Official但是我發(fā)現(xiàn)我的code版本不兼容，按需求選擇
- Vue - Official（官方核心支持，必裝）
- Prettier（代碼格式化，必裝）
- Auto Close Tag + Auto Rename Tag（標(biāo)簽處理，必裝）
- Live Server（實(shí)時(shí)預(yù)覽，必裝）
- Chinese Language Pack（中文界面，國內(nèi)開發(fā)者必裝）
- vscode-icons（文件圖標(biāo)，推薦）
- Path Autocomplete（路徑補(bǔ)全，推薦）
- HTML CSS Support（HTML/CSS 增強(qiáng)，推薦）
- Vue 3 Snippets + Vue TypeScript Snippets（Vue 3/TS 開發(fā)，推薦）
- Fitten Code（AI 輔助，可選，按需安裝）
public：就是腳手架的根目錄里面放了一個(gè)頁簽圖標(biāo)
src：源代碼文件
- main.ts引入創(chuàng)建應(yīng)用和引入組件；創(chuàng)建一個(gè)App組件并將App組件掛載到id為app的容器上面
- App.vue 這是 Vue 應(yīng)用的根組件，所有其他組件都將被嵌套在這個(gè)組件中
- components 此文件夾用來存放可復(fù)用的 Vue 組件。這些組件能夠在不同頁面或者其他組件里使用
assets此文件夾用于存放靜態(tài)資源，像圖片、字體、樣式文件等
其他：
- >.gitignore:git的忽略文件
- >env.d.ts目的是為了讓ts認(rèn)識(shí).jpg和.txt文件(點(diǎn)進(jìn)去發(fā)現(xiàn)飄紅，在VScode終端輸入npm i 安裝所有依賴 目錄就會(huì)出現(xiàn)依賴包node_modules)
- >index.html 入口文件把src里面main.ts引入了；還有一個(gè)id為app的div標(biāo)簽
- >后面的package就是包的依賴聲明文件之類的
- >tsconfig那個(gè)就是ts的配置文件
- >vite.config.ts:整個(gè)工程的配置文件，里面可以安裝插件配置代理之類的
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue?指令版富文本溢出省略截取示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能的實(shí)例代碼
這篇文章主要介紹了vue實(shí)現(xiàn)一個(gè)6個(gè)輸入框的驗(yàn)證碼輸入組件功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
最近在做一個(gè)前端vue.js對(duì)接的功能模塊時(shí)，需要實(shí)現(xiàn)一個(gè)下載圖片的功能，本文就介紹了vue.js根據(jù)圖片url進(jìn)行圖片下載，感興趣的可以了解一下2021-06-06
在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法
這篇文章主要介紹了在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-06-06
Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?
前幾天在vue運(yùn)行項(xiàng)目過程中報(bào)錯(cuò)了,所以下面這篇文章主要給大家介紹了關(guān)于Vue報(bào)錯(cuò)Syntax?Error:TypeError:?this.getOptions?is?not?a?function的解決方法,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了vue子頁面控制父頁面刷新問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實(shí)現(xiàn)登錄頁面的驗(yàn)證碼以及驗(yàn)證過程解析(面向新手)
這篇文章主要介紹了vue實(shí)現(xiàn)登錄頁面的驗(yàn)證碼以及驗(yàn)證過程解析,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue3中使用setup通過ref獲取子組件的屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue的自定義事件之組件通信工具詳解,Vue的自定義事件(Custom Events)是一種強(qiáng)大的工具,用于實(shí)現(xiàn)組件之間的通信和數(shù)據(jù)傳遞,本文將深入探討什么是Vue的自定義事件,以及如何自定義和使用它們,需要的朋友可以參考下2023-10-10
今天小編就為大家分享一篇在Vue mounted方法中使用data變量詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-11-11