vite+vue3+ts項目新建以及解決遇到的問題
一、新建vite+vue3+ts項目
此處我使用npm做一下安裝:
npm create vite
出現(xiàn)如下界面:
- 輸入項目名稱，
- 然后選擇項目類型，此處我選擇vue，
- 選擇語言，此處我選擇的是vue-ts，因為我要用ts版本進(jìn)行開發(fā)。
剩下的就創(chuàng)建完了。最后，把該項目文件夾在vscode里面打開， 然后打開終端，執(zhí)行以下命令，就可以執(zhí)行項目了，
npm installnpm run dev
空項目執(zhí)行很快，不到1秒的時間就啟動了，大家可以試一下。
目前項目的目錄結(jié)構(gòu)，如下所示：
二、解決過程中遇到的問題
解決報錯：Module ‘“xx.vue“‘ has no default export.
場景復(fù)現(xiàn)：使用Vue3測試時有如下代碼，簡單的代碼附件了一些看著不爽的提示，雖然不影響正常運行。
原因：vetur是一個vscode插件，用于為.vue單文件組件提供代碼高亮以及語法支持。那既然官方推薦 _volar_，簡單的說volar是vetur的升級版本，提供了更好的功能并有更好的TS支持。
解決方法：選擇卸載vetur，安裝volar插件，最后，記得重啟下VS Code。
ok，問題解決了。
解決報錯：Error [ERR_MODULE_NOT_FOUND]: Cannot find package ‘uuid’ imported from xxx的解決
場景復(fù)現(xiàn)：
原因：顧名思義,根據(jù)錯誤信息翻譯【該文件路徑下找不到uuid的包】即沒有添加依賴
解決方法：由于找不到包，所以我們下載該包即可
npm install fs-extra --save
ok，問題解決。
解決報錯：[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?
場景復(fù)現(xiàn)：
原因：style中的lang屬性
解決方法：安裝node-less 或 less 就可以解決，不安裝的話就去除style中的lang屬性
ok，問題解決。
總結(jié)
到此這篇關(guān)于vite+vue3+ts項目新建以及解決遇到的問題的文章就介紹到這了,更多相關(guān)vite+vue3+ts項目新建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
下面小編就為大家分享一篇解決vue 路由變化頁面數(shù)據(jù)不刷新的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
通過debug搞清楚.vue文件如何變成.js文件(案例詳解)
這篇文章主要介紹了通過debug搞清楚.vue文件如何變成.js文件,本文以@vitejs/plugin-vue舉例,通過debug的方式帶你一步一步的搞清楚vue文件是如何編譯為js文件的,需要的朋友可以參考下2024-07-07
這篇文章主要介紹了Vue3 源碼導(dǎo)讀(推薦)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-10-10
這篇文章主要給大家介紹了基于vue通用表單解決方案的思考與分析，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
這篇文章主要為大家詳細(xì)介紹了Vue實現(xiàn)本地購物車功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
解決vue使用echarts報錯:Can't get DOM width&nbs
這篇文章主要介紹了解決vue使用echarts報錯:Can't get DOM width or height. Please check dom.clientWidth and dom.clientHeight問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-05-05
這篇文章主要介紹了vue 在單頁面應(yīng)用里使用二級套嵌路由，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
解決Vue中的生命周期beforeDestory不觸發(fā)的問題
這篇文章主要介紹了解決Vue中的生命周期beforeDestory不觸發(fā)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了解決在el-dialog中無法正確獲取DOM的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
下面小編就為大家分享一篇vue獲取當(dāng)前點擊的元素并傳值的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03