一、新建vite+vue3+ts項(xiàng)目

此處我使用npm做一下安裝:

npm create vite

出現(xiàn)如下界面:

• 輸入項(xiàng)目名稱，
• 然后選擇項(xiàng)目類型，此處我選擇vue，
• 選擇語(yǔ)言，此處我選擇的是vue-ts，因?yàn)槲乙胻s版本進(jìn)行開發(fā)。

剩下的就創(chuàng)建完了。最后，把該項(xiàng)目文件夾在vscode里面打開， 然后打開終端，執(zhí)行以下命令，就可以執(zhí)行項(xiàng)目了，

npm installnpm run dev

空項(xiàng)目執(zhí)行很快，不到1秒的時(shí)間就啟動(dòng)了，大家可以試一下。

目前項(xiàng)目的目錄結(jié)構(gòu)，如下所示：

二、解決過(guò)程中遇到的問(wèn)題

解決報(bào)錯(cuò)：Module ‘“xx.vue“‘ has no default export.

場(chǎng)景復(fù)現(xiàn)：使用Vue3測(cè)試時(shí)有如下代碼，簡(jiǎn)單的代碼附件了一些看著不爽的提示，雖然不影響正常運(yùn)行。

原因：vetur是一個(gè)vscode插件，用于為.vue單文件組件提供代碼高亮以及語(yǔ)法支持。那既然官方推薦 _volar_，簡(jiǎn)單的說(shuō)volar是vetur的升級(jí)版本，提供了更好的功能并有更好的TS支持。

解決方法：選擇卸載vetur，安裝volar插件，最后，記得重啟下VS Code。

ok，問(wèn)題解決了。

解決報(bào)錯(cuò)：Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘uuid’ imported from xxx的解決

場(chǎng)景復(fù)現(xiàn)：

原因：顧名思義,根據(jù)錯(cuò)誤信息翻譯【該文件路徑下找不到uuid的包】即沒(méi)有添加依賴

解決方法：由于找不到包，所以我們下載該包即可

npm install fs-extra --save

ok，問(wèn)題解決。

解決報(bào)錯(cuò)：[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?

場(chǎng)景復(fù)現(xiàn)：

原因：style中的lang屬性

解決方法：安裝node-less 或 less 就可以解決，不安裝的話就去除style中的lang屬性

ok，問(wèn)題解決。

總結(jié)

到此這篇關(guān)于vite+vue3+ts項(xiàng)目新建以及解決遇到的問(wèn)題的文章就介紹到這了,更多相關(guān)vite+vue3+ts項(xiàng)目新建內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論