準備

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

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

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

輸入命令

 npm create vue@latest

有一個install的話直接y就行，然后根據(jù)自己選擇創(chuàng)建

這樣就是成功了

從桌面vue3項目點進去，解釋項目文件

.vscode里面有extension.json里面裝著插件，推薦Vue - Official但是我發(fā)現(xiàn)我的code版本不兼容，按需求選擇

• Vue - Official（官方核心支持，必裝）
• Prettier（代碼格式化，必裝）
• Auto Close Tag + Auto Rename Tag（標簽處理，必裝）
• Live Server（實時預覽，必裝）
• Chinese Language Pack（中文界面，國內(nèi)開發(fā)者必裝）
• vscode-icons（文件圖標，推薦）
• Path Autocomplete（路徑補全，推薦）
• HTML CSS Support（HTML/CSS 增強，推薦）
• Vue 3 Snippets + Vue TypeScript Snippets（Vue 3/TS 開發(fā)，推薦）
• Fitten Code（AI 輔助，可選，按需安裝）

public：就是腳手架的根目錄里面放了一個頁簽圖標

src：源代碼文件

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

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

其他：

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

總結

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

最新評論