快捷導(dǎo)航

利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個小BUG詳解

更新時間：2023年04月19日 12:44:15 作者：顏顏yan_

Vite作為一個構(gòu)建工具,提供了一種快速的方法來構(gòu)建Vue應(yīng)用,而Vue3?則是一個前端框架,提供了強(qiáng)大的功能來構(gòu)建和管理前端項(xiàng)目,下面這篇文章主要給大家介紹了關(guān)于利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個小BUG的相關(guān)資料,需要的朋友可以參考下

前言

vite是一個web開發(fā)構(gòu)建工具，由于其原生ES模塊導(dǎo)入方式，可以實(shí)現(xiàn)閃電般的冷服務(wù)器啟動。相對于webpack可以更快創(chuàng)建項(xiàng)目。

注意：vite不支持IE11

vite簡介

vite主要由兩部分組成：

一個開發(fā)服務(wù)器，它利用原生ES模塊提供了豐富的內(nèi)建功能。
一套構(gòu)建指令，它使用Rollup打包代碼，預(yù)配置輸出高度優(yōu)化的靜態(tài)資源用于生產(chǎn)。

vite兩個子命令：

serve：啟動一個用于開發(fā)的服務(wù)器
build：構(gòu)建整個項(xiàng)目，也就是上線

利用vite創(chuàng)建vue3項(xiàng)目

首先我們需要用到npm進(jìn)行創(chuàng)建，如果npm的版本是6.x，則使用以下代碼：

npm init vite@latest <project-name> --template vue

如果npm的版本是7+，需要加上額外的雙短橫線，則使用以下代碼：

npm init vite@latest <project-name> -- --template vue

使用npm -v查看npm的版本，v也就是version，版本的意思。

進(jìn)入命令提示符，輸入npm -v，查看版本

小編的npm的版本是9.3.1，所以在終端輸入如下代碼：
npm init vite@latest vue-firstdemo -- --template vue
這里的vue-firstdemo是創(chuàng)建項(xiàng)目的名字噢~

我們的項(xiàng)目創(chuàng)建完成啦，接著根據(jù)提示，輸入cd vue-firstdemo進(jìn)入創(chuàng)建的項(xiàng)目，輸入npm
install安裝依賴。

最后輸入npm run dev運(yùn)行項(xiàng)目，我們可以發(fā)現(xiàn)，使用vite運(yùn)行起來速度也是非?？斓?，在瀏覽器輸入local中的地址，就運(yùn)行成功啦！

結(jié)構(gòu)目錄

以下是創(chuàng)建完成后的項(xiàng)目結(jié)構(gòu)目錄，node_modules文件夾是整個項(xiàng)目的依賴；public文件夾是靜態(tài)資源文件夾，用來存放靜態(tài)資源的；src文件夾是源代碼部分，編寫的代碼都是放在src中的噢；main.js是入口文件。

一個小BUG

在運(yùn)行代碼后，服務(wù)器報了一個錯誤很有意思，和大家分享一下：

Unchecked runtime.lastError: The message port closed before a response was received.

這句話的意思是服務(wù)端無法在指定時間內(nèi)，給到客戶端的響應(yīng)。導(dǎo)致這個錯誤的原因是Chrome 瀏覽器的擴(kuò)展程序在運(yùn)行時報錯。具體的說，是在調(diào)用chrome.runtime.sendMessage() 或 chrome.runtime.sendNativeMessage() 時觸發(fā)這個報錯。也就是插件和程序不兼容導(dǎo)致的。

解決方法：

在 Chrome 瀏覽器中訪問 chrome://extensions/ 打開擴(kuò)展程序界面，逐個關(guān)閉擴(kuò)展以排查出問題所在。

總結(jié)

到此這篇關(guān)于利用vite創(chuàng)建vue3項(xiàng)目的全過程及一個小BUG詳解的文章就介紹到這了,更多相關(guān)vite創(chuàng)建vue3項(xiàng)目內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: