vite+vue3+ts项目新建以及解决遇到的问题
一、新建vite+vue3+ts项目
此处我使用npm做一下安装:
npm create vite
出现如下界面:
- 输入项目名称，
- 然后选择项目类型，此处我选择vue，
- 选择语言，此处我选择的是vue-ts，因为我要用ts版本进行开发。
剩下的就创建完了。最后，把该项目文件夹在vscode里面打开， 然后打开终端，执行以下命令，就可以执行项目了，
npm installnpm run dev
空项目执行很快，不到1秒的时间就启动了，大家可以试一下。
目前项目的目录结构，如下所示：
二、解决过程中遇到的问题
解决报错：Module ‘“xx.vue“‘ has no default export.
场景复现：使用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的解决
场景复现：
原因：顾名思义,根据错误信息翻译【该文件路径下找不到uuid的包】即没有添加依赖
解决方法：由于找不到包，所以我们下载该包即可
npm install fs-extra --save
ok，问题解决。
解决报错：[plugin:vite:css] Preprocessor dependency "less" not found. Did you install it?
场景复现：
原因：style中的lang属性
解决方法：安装node-less 或 less 就可以解决，不安装的话就去除style中的lang属性
ok，问题解决。
总结
到此这篇关于vite+vue3+ts项目新建以及解决遇到的问题的文章就介绍到这了,更多相关vite+vue3+ts项目新建内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
今天小编就为大家分享一篇Vue中保存数据到磁盘文件的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
video.js是一个拥有h5背景的网络视频播放器，同时支持h5以及Flash视频播放，这篇文章主要介绍了vue中使用video.js进行视频播放,需要的朋友可以参考下2019-07-07
本文主要介绍了vue mixins代码复用的项目实践，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
如何使用electron将vue项目打包成.exe文件(保姆级教程)
本文给大家介绍如何使用electron将vue项目打包成.exe文件,大家要注意一下vue2项目,使用的vue-element-admin框架,用electron打包成.exe文件,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-03-03
当我们把信息化系统给用户使用时，用户经常需要把以前在excel里录入的数据导入的信息化系统里，这样为用户提供了很大的方便，这篇文章主要介绍了vue中或者react中的excel导入和导出,需要的朋友可以参考下2023-09-09
这篇文章主要介绍了使用vue init webpack项目名创建项目方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11
这篇文章主要为大家详细介绍了vue实现无限消息无缝滚动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
这篇文章主要介绍了Vue render函数实战之实现tabs选项卡组件的相关知识，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
这篇文章主要给大家介绍了关于vue上传图片文件的相关资料，介绍了利用原始input标签form表单上传、elementui自带的el-upload上传以及elementui实现一次性上传多张图片等方法，需要的朋友可以参考下2021-05-05
这篇文章主要介绍了VUE数组根据索引删除数据,页面同时更新的实现方法，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
最新评论