vite如何構(gòu)建vue3項(xiàng)目
更新時(shí)間：2024年10月11日 10:59:01 作者：harmsworth2016
本文介紹了如何使用Vite快速搭建Vue項(xiàng)目,強(qiáng)調(diào)Vite對(duì)Node.js版本有最低要求（>=12.0.0）,提供了環(huán)境準(zhǔn)備、安裝步驟和啟動(dòng)指南,旨在幫助開發(fā)者高效啟動(dòng)Vue項(xiàng)目
環(huán)境準(zhǔn)備
- 安裝最新版本
@vuejs/app
yarn global add @vue/cli # OR npm install -g @vue/cli
- 升級(jí)到最新版本
@vitejs/app
yarn global upgrade @vue/cli # OR npm update -g @vue/cli
- 查看
vue版本
vue -V
兼容性注意
Vite 需要 Node.js 版本 >= 12.0.0。
故切換 node 版本，可查看該文章：使用 nvs 管理本地 Node 版本。
創(chuàng)建項(xiàng)目
yarn create @vitejs/app <project-name> # OR npm init @vitejs/app <project-name>
選擇一個(gè)框架
選擇一種 ECMAScript 的實(shí)現(xiàn)
創(chuàng)建完成
啟動(dòng)
npm install npm run dev # OR yarn yarn dev
目錄結(jié)構(gòu)
總結(jié)
vite依賴node 12版本及以上- 使用
vite構(gòu)建vue項(xiàng)目更加簡(jiǎn)潔，啟動(dòng)速度飛快
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要為大家介紹了vue之mixin的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue移動(dòng)端項(xiàng)目渲染pdf步驟及問題小結(jié)
這篇文章主要介紹了vue移動(dòng)端項(xiàng)目渲染pdf步驟,vue-pdf的插件在使用的過程中是連連踩坑的，基本遇到3個(gè)問題，分別在文中給大家詳細(xì)介紹，需要的朋友可以參考下2022-08-08
vue實(shí)現(xiàn)圖片轉(zhuǎn)pdf的示例代碼
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)圖片轉(zhuǎn)pdf的相關(guān)知識(shí)，文中的示例代碼講解詳細(xì)，具有一定的借鑒價(jià)值，需要的小伙伴可以跟隨小編一起了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了vue搭建多頁面多系統(tǒng)應(yīng)用的方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
vue3+vue-cli4中使用svg的方式詳解(親測(cè)可用)
最近在做個(gè)vue的項(xiàng)目,從各種github上的開源庫(kù)上借鑒開發(fā)方法,給大家分享下,這篇文章主要給大家介紹了關(guān)于vue3+vue-cli4中使用svg的相關(guān)資料,需要的朋友可以參考下2022-08-08
src/main.js是入口文件,主要作用是初始化vue實(shí)例并使用需要的插件, Vue.use()的作用就是讓它里面被注冊(cè)的組件能夠被全局使用,本文通過實(shí)例代碼介紹vue項(xiàng)目中main.js的用法,感興趣的朋友一起看看吧2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue如何使用EasyPlayerPro實(shí)現(xiàn)播放本地MP4視頻功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-11-11
vue3自定義指令自動(dòng)獲取節(jié)點(diǎn)的width和height代碼示例
這篇文章主要介紹了如何使用ResizeObserver監(jiān)聽組件的寬度和高度,并將其封裝成一個(gè)指令以便全局或局部使用,ResizeObserver可以監(jiān)聽元素的多個(gè)尺寸屬性,如top、bottom、left等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-11-11
這篇文章主要介紹了vue中屬性執(zhí)行順序,選項(xiàng)的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods，具體詳細(xì)內(nèi)容本文給大家講解的非常詳細(xì)，需要的朋友可以參考下2023-09-09
這篇文章主要給大家介紹了關(guān)于Vue頁面渲染中key的應(yīng)用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01