準(zhǔn)備

node.js下載才可以使用npm命令 => 腳手架安裝

vite項(xiàng)目創(chuàng)建步驟

讓項(xiàng)目比較好找，所以我就創(chuàng)建在桌面了，右擊桌面=> 選擇在終端打開(kāi)

輸入命令

 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（中文界面，國(guó)內(nèi)開(kā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 開(kāi)發(fā)，推薦）
• Fitten Code（AI 輔助，可選，按需安裝）

public：就是腳手架的根目錄里面放了一個(gè)頁(yè)簽圖標(biāo)

src：源代碼文件

• main.ts引入創(chuàng)建應(yīng)用和引入組件；創(chuàng)建一個(gè)App組件并將App組件掛載到id為app的容器上面
• App.vue 這是 Vue 應(yīng)用的根組件，所有其他組件都將被嵌套在這個(gè)組件中
• components 此文件夾用來(lái)存放可復(fù)用的 Vue 組件。這些組件能夠在不同頁(yè)面或者其他組件里使用

assets此文件夾用于存放靜態(tài)資源，像圖片、字體、樣式文件等

其他：

• >.gitignore:git的忽略文件
• >env.d.ts目的是為了讓ts認(rèn)識(shí).jpg和.txt文件(點(diǎn)進(jìn)去發(fā)現(xiàn)飄紅，在VScode終端輸入npm i  安裝所有依賴(lài)  目錄就會(huì)出現(xiàn)依賴(lài)包node_modules)
• >index.html 入口文件把src里面main.ts引入了；還有一個(gè)id為app的div標(biāo)簽
• >后面的package就是包的依賴(lài)聲明文件之類(lèi)的
• >tsconfig那個(gè)就是ts的配置文件
• >vite.config.ts:整個(gè)工程的配置文件，里面可以安裝插件配置代理之類(lèi)的

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。