快捷導(dǎo)航

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

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

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

前言

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

注意：vite不支持IE11

vite簡(jiǎn)介

vite主要由兩部分組成：

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

vite兩個(gè)子命令：

serve：?jiǎn)?dòng)一個(gè)用于開(kāi)發(fā)的服務(wù)器
build：構(gòu)建整個(gè)項(xiàng)目，也就是上線(xiàn)

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

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

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

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

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安裝依賴(lài)。

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

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

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

一個(gè)小BUG

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

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

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

解決方法：

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

總結(jié)

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

您可能感興趣的文章: