使用vite構(gòu)建vue3項(xiàng)目的方法步驟
前言
當(dāng)我們選擇了vue3作為我們項(xiàng)目的開(kāi)發(fā)，就更加的推薦使用vite來(lái)對(duì)我們的項(xiàng)目進(jìn)行打包。很簡(jiǎn)單——這也是開(kāi)發(fā)vue的團(tuán)隊(duì)開(kāi)發(fā)的工具，因此支持性肯定比傳統(tǒng)的打包工具好，下面我們就來(lái)使用vite來(lái)開(kāi)發(fā)一個(gè)vue3項(xiàng)目。
一、vite介紹
Vite（法語(yǔ)意為 “快速的”，發(fā)音 /vit/，發(fā)音同 “veet”) 是一種新型前端構(gòu)建工具，能夠顯著提升前端開(kāi)發(fā)體驗(yàn)（熱更新、打包構(gòu)建速度更快）。
二、vite對(duì)比webpack
1.Webpack：將所有的模塊提前編譯、打包進(jìn) bundle 中，不管這個(gè)模塊是否被用到，隨著項(xiàng)目越來(lái)越大，打包啟動(dòng)的速度自然越來(lái)越慢。
2.Vite：瞬間開(kāi)啟一個(gè)服務(wù)，并不會(huì)先編譯所有文件，當(dāng)瀏覽器用到某個(gè)文件時(shí)，Vite 服務(wù)會(huì)收到請(qǐng)求然后編譯后響應(yīng)到客戶端。
3.使用webpack打包模式
使用webpack打包會(huì)將我們所有的文件都進(jìn)行一個(gè)打包處理，因此當(dāng)項(xiàng)目文件越來(lái)越多的時(shí)候，打包編譯的事件也會(huì)變長(zhǎng)
4.使用vite打包模式
vite的打包模式是先開(kāi)啟服務(wù)，再根據(jù)我們的請(qǐng)求進(jìn)行一個(gè)相應(yīng)的打包編譯。因此打包速度特別快，類似于實(shí)現(xiàn)了按需導(dǎo)入，不需要使用的文件不進(jìn)行導(dǎo)入。
好了基礎(chǔ)概念學(xué)完了，我們來(lái)看看我們?cè)趺词褂胿ite來(lái)來(lái)開(kāi)發(fā)我們的vue3項(xiàng)目吧！??
三、使用vite構(gòu)建項(xiàng)目
【學(xué)習(xí)指南】學(xué)習(xí)某一項(xiàng)技能的最好辦法是？沒(méi)錯(cuò)就是看官方文檔，官方文檔指南：vite官網(wǎng)
1.運(yùn)行創(chuàng)建項(xiàng)目命令
# 使用 npm npm create vite@latest # 使用 yarn yarn create vite # 使用 pnpm pnpm create vite
注意點(diǎn)：Vite 需要 Node.js 版本 >= 12.0.0。在cmd窗口輸入
node -v
即可查詢到我們當(dāng)前的一個(gè)node的版本。
2.輸入項(xiàng)目名稱，默認(rèn)是 vite-project
3.選擇前端框架
4.選擇項(xiàng)目類型
5.創(chuàng)建完畢
接下來(lái)的話，僅需要按照上述出現(xiàn)的三條指令即可完成我們項(xiàng)目的運(yùn)行
根據(jù)cmd的提示，我們依次寫下
cd vue3-study npm install npm run dev
隨后復(fù)制local后面生成的當(dāng)前地址粘貼到在瀏覽器中打開(kāi)就可以完成我們使用vite創(chuàng)建一個(gè)vue3的項(xiàng)目嘍！通常出現(xiàn)了這三條指令之后我們可以直接進(jìn)我們的vscode執(zhí)行這些命令也可以實(shí)現(xiàn)vue3項(xiàng)目的一個(gè)啟動(dòng)
至此，一個(gè)vue3的項(xiàng)目成功的被你創(chuàng)建出來(lái)嘍！~
6.相關(guān)插件安裝
- 1.禁用 Vetur 插件，安裝 Volar 插件。
- 2.VSCode 代碼片段插件：Vue VSCode Snippets，使用見(jiàn)文檔。
- 3.Vue3 的 Chrome 調(diào)試插件也變了，下載鏈接，注意安裝后需要把之前的 Vue2 Devtools 關(guān)閉掉。
7.編寫 Vue 應(yīng)用
- 1.清空 src 里面的所有內(nèi)容。
- 2.在 src/main.js 中按需導(dǎo)入 createApp 函數(shù)。
- 3.定義 App.vue 根組件，導(dǎo)入到 main.js。
- 4.使用 createApp 函數(shù)基于 App.vue 根組件創(chuàng)建應(yīng)用實(shí)例。
- 5.掛載至 index.html 的 #app 容器
main.js
import {
createApp
} from 'vue'
import App from './App.vue'
const app = createApp(App)
app.mount('#app')App.vue
<template>
<div>我是根組件,Hello</div>
</template>
<script>
export default {
name: 'App',
}
</script>index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" rel="external nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<!-- 容器，由 Vue 創(chuàng)建實(shí)例來(lái)渲染 -->
<div id="app"></div>
<!-- Webpack 導(dǎo)入的是打包后的代碼 -->
<!-- Vite 直接基于 ESM 加載源文件 -->
<script type="module" src="/src/main.js"></script>
</body>
</html>最后在根文件下執(zhí)行即可執(zhí)行我們的項(xiàng)目(博主使用的npm)
npm run dev
隨后頁(yè)面出現(xiàn)一個(gè)地址，點(diǎn)擊進(jìn)去即可將我們的vue3項(xiàng)目跑起來(lái)
頁(yè)面第一行將會(huì)出現(xiàn)：我是根組件,Hello
到此這篇關(guān)于使用vite構(gòu)建vue3項(xiàng)目的方法步驟的文章就介紹到這了,更多相關(guān)vite構(gòu)建vue3內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式
這篇文章主要介紹了vue3父子組件通信、兄弟組件實(shí)時(shí)通信方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)
這篇文章主要介紹了vue登錄以及權(quán)限驗(yàn)證相關(guān)的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
整理項(xiàng)目中vue.config.js打包優(yōu)化配置方法
這篇文章主要介紹了整理項(xiàng)目中vue.config.js打包優(yōu)化,包括配置?webpack-bundle-analyzer?插件查看文件大小及配置compression-webpack-plugin?用gzip壓縮打包的文件大小，本文結(jié)合實(shí)例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2023-02-02
這篇文章主要給大家介紹了關(guān)于Vue3中watch用法與最佳實(shí)踐的相關(guān)資料,watch的作用可以監(jiān)控一個(gè)值的變換,并調(diào)用因?yàn)樽兓枰獔?zhí)行的方法,可以通過(guò)watch動(dòng)態(tài)改變關(guān)聯(lián)的狀態(tài),需要的朋友可以參考下2021-07-07
你知道Vue中神奇的$set是如何實(shí)現(xiàn)的嗎?
在日常開(kāi)發(fā)中，$set的也是一個(gè)非常實(shí)用的API。但是我們知其然更要知其所以然，接下來(lái)就跟隨小編一起看一下Vue中的$set是如何實(shí)現(xiàn)的吧2022-12-12
vue移動(dòng)端如何解決click事件延遲,封裝tap等事件
這篇文章主要介紹了vue移動(dòng)端如何解決click事件延遲，封裝tap等事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-03-03
這篇文章主要為大家詳細(xì)介紹了vue日期時(shí)間工具類，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
gizp壓縮是一種http請(qǐng)求優(yōu)化方式，通過(guò)減少文件體積來(lái)提高加載速度。這篇文章主要介紹了Vue CLI3 開(kāi)啟gzip壓縮,需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于Vue自定義加水波紋效果指令的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-02-02
這篇文章主要介紹了Vue 數(shù)據(jù)綁定的原理，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-11-11