使用vite創(chuàng)建單頁應(yīng)用

學(xué)習(xí)路徑

vite介紹
創(chuàng)建 vite 的項目
梳理項目的結(jié)構(gòu)
vite 項目的運行流程

vite介紹

·vite·是vue 官方提供另外一種快速創(chuàng)建工程化的 SPA 項目的方式(一共有兩種方式)
① 基于 vite 創(chuàng)建 SPA 項目
② 基于 vue-cli 創(chuàng)建 SPA 項目

創(chuàng)建 vite 的項目

按照順序執(zhí)行如下的命令，即可基于 vite 創(chuàng)建 vue 3.x 的工程化項目

1. npm init vite-app 項目名稱 2. cd 項目名稱 3. npm install 4. npm run dev

整個新建項目當(dāng)中：

node_modules 目錄用來存放第三方依賴包

public 是公共的靜態(tài)資源目錄

src是項目的源代碼目錄（程序員寫的所有代碼都要放在此目錄下）

.gitignore 是 Git 的忽略文件

index.html是 SPA 單頁面應(yīng)用程序中唯一的 HTML 頁面

package.json 是項目的包管理配置文件

src 項目源代碼目錄之下:

assets目錄用來存放項目中所有的靜態(tài)資源文件（css、fonts等）

components目錄用來存放項目中所有的自定義組件

App.vue 是項目的根組件

index.css 是項目的全局樣式表文件

main.js 是整個項目的打包入口文件

vite 項目的運行流程

在工程化的項目中，vue 要做的事情很單純：通過main.js把 App.vue 渲染到 index.html的指定區(qū)域中。
其中：
① App.vue 用來編寫待渲染的模板結(jié)構(gòu)
② index.html 中需要預(yù)留一個 el 區(qū)域
③ main.js 把 App.vue 渲染到了 index.html 所預(yù)留的區(qū)域中

總結(jié)

以上是生活随笔為你收集整理的使用vite创建单页应用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。