vite+vue3+ts項目新建以及解決遇到的問題
一、新建vite+vue3+ts項目
此處我使用npm做一下安裝:
npm create vite
出現(xiàn)如下界面:
- 輸入項目名稱，
- 然后選擇項目類型，此處我選擇vue，
- 選擇語言，此處我選擇的是vue-ts，因為我要用ts版本進行開發(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)文章
webpack 3 + Vue2 使用dotenv配置多環(huán)境的步驟
這篇文章主要介紹了webpack 3 + Vue2 使用dotenv配置多環(huán)境,env文件在配置文件都可以用, vue頁面用的時候需要在 webpack.base.conf.js 重新配置,需要的朋友可以參考下2023-11-11
vue+elementUI實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格(可指定合并列)
這篇文章主要介紹了vue+elementUI如何實現(xiàn)動態(tài)合并數(shù)據(jù)相同的單元格,文中有詳細的代碼實例供大家參考,具有一定的參考價值,需要的朋友可以參考下2023-07-07
@change 是 Vue.js 中用于監(jiān)聽表單元素值變化的事件處理器，這篇文章主要介紹了vue的@change的用法,需要的朋友可以參考下2023-10-10
解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題
這篇文章主要介紹了解決nuxt頁面中mounted、created、watch執(zhí)行兩遍的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue 報錯Error: No PostCSS Config foun
這篇文章主要介紹了Vue 報錯Error: No PostCSS Config found問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue實現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實例代碼
這篇文章主要介紹了Vue實現(xiàn)按鈕旋轉(zhuǎn)和移動位置的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2018-08-08
Vue.set()實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)的方法
這篇文章主要介紹了Vue.set()實現(xiàn)數(shù)據(jù)動態(tài)響應(yīng)的相關(guān)知識，非常不錯，具有參考借鑒價值,需要的朋友可以參考下2018-02-02
本篇文章主要介紹了Vue.js移動端左滑刪除組件的實現(xiàn)代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
Mock.js 是一個可以在開發(fā)階段模擬后端數(shù)據(jù)接口的 JavaScript 庫,它能夠生成大量不同類型的隨機數(shù)據(jù),并且模擬真實的接口返回,允許前端開發(fā)在沒有真實后端接口的情況下進行開發(fā),本文給大家介紹了Vue2項目中Mock.js的完整集成與使用教程,需要的朋友可以參考下2025-02-02
這篇文章主要為大家詳細介紹了vue.js指令v-model實現(xiàn)方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12